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CAPÍTULO 5 
Sistema de vida e adição de inimigos 


No capitulo anterior, fizemos um ótimo trabalho ao adicionar 
movimentação e animações ao nosso personagem. Passamos por 
conceitos importantíssimos do Construct 2, desde o editor de 
imagem e seus menus para animação (envolvendo o uso de 
quadros por segundos) até os primeiros eventos dentro das folhas 
de eventos. 


Utilizamos os eventos de Keyboard (teclado) para associar as 
animações aos comandos dados pelo jogador. Observamos que os 
eventos possuem basicamente duas partes: as condições e as 
ações. Além disso, também usamos subeventos para conseguir 
descrever condições mais específicas para a animação de cada um 
dos estados do nosso personagem: parado, andando (direita e 
esquerda) e pulando. 


Neste capítulo, vamos ver outro conceito importantíssimo para o 
desenvolvimento de jogos dentro do Construct 2, as variáveis. Para 
mostrar como usá-las, levaremos o nosso jogo para o próximo 
patamar, adicionando um sistema de vida. 


Esse sistema fará com que o nosso jogo termine se o jogador ferir o 
nosso personagem mais de três vezes. A seguir, adicionaremos os 
inimigos e associaremos esse sistema ao comportamento deles. 


Preparados? Então, vamos nessa. 


5.1 Adicionando vidas ao personagem 


Como dissemos no início do capítulo, nossa missão aqui será 
adicionar um sistema de vidas para o nosso personagem, dando a 


possibilidade de o jogador perder o jogo. Faremos com o que ele 
inicie com três vidas, que serão representadas por corações na tela 
(não se preocupe, pois faremos todos os passos juntos). 


A ideia é que cada vez que ele colidir com um inimigo, ou sair da 
área visível do layout, ele perca uma vida. Uma vez que ele perca 
todas as três, a tela de final de jogo aparecerá e este será finalizado 
— "finalizado" aqui significa que o jogador perderá todo o progresso 
e só terá a possibilidade de iniciar o jogo do início. Para fazer tudo 
isso, aprenderemos um conceito muito importante, o de variáveis. 


Quando falamos de computadores, variáveis são espaços na 
memória RAM (Random Access Memory) da máquina física. Essa 
máquina pode ser um computador desktop, um notebook, um tablet 
ou mesmo o seu smartphone. Nesses espaços, podemos 
armazenar qualquer tipo de informação, desde números, palavras 
ou até textos inteiros. 


Todo programa (ou aplicativo) que roda no seu computador utiliza 
dezenas, centenas ou até milhares de variáveis na memória. É por 
isso que, quanto maior ela for, mais coisas você consegue fazer 
simultaneamente. 


Este espaço de memória fica fora do seu disco rígido, pois ela é 
uma memoria de rápido acesso. Quando um programa é carregado, 
o sistema joga-o para dentro desta memória, e o processo usa as 
variáveis lá dentro para controlar o seu fluxo. E com o Construct 2, 
não é diferente. 


Ao abrir um jogo, ele também é jogado para esta memória, e 
podemos utilizar variáveis para controlar o seu fluxo. Dentro do 
Construct, podemos declarar dois tipos de variáveis: locais e 
globais. Cada uma tem contexto e comportamento diferentes. 
Vamos ver com mais detalhes. 


Variáveis locais 


O primeiro tipo de variável que veremos são as locais — também 
chamadas de variáveis de instância. Elas possuem este nome 
porque estão sempre associadas ao objeto que as declararam. Mas 
o que isso significa? 


Quer dizer que podemos ter uma mesma variável em dois objetos 
diferentes, com dois valores diferentes. Usamo-las para guardar 
informações que sejam relevantes para o objeto que as contêm, 
como o número de vidas deste objeto. Será que você entendeu 
aonde queremos chegar? Vamos ver como funcionam as variáveis 
locais na prática. 


Começaremos adicionando uma variável local ao nosso objeto 
Jogadoranimacao . Para isso, selecione-o e vá até as suas 
propriedades (apresentadas na Barra de Propriedades ). Encontre a 
seção Instance variables (variáveis de instância), como mostra a 
figura a seguir. Nesta opção, declaramos as variáveis que 
pertencerão a este objeto. 





Plugin 
UID 
Global 


Pin (no properties) 
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Figura 5.1: Instance variables 


Na coluna add/edit (adicionar/editar), clique no link onde esta 
escrito Instance variables . Uma pequena janela vai se abrir oferendo 
algumas opções. Procure pelo símbolo de soma ( + ) e adicione uma 
variável nova. Na próxima janela, você encontrará quatro campos: 





JogadorÂnimacao: Instance variables 


Name Type Initial value 


New instance variable 4 





m 


Figura 5.2: Adicionando uma variável local 


e Name (nome); 

Type (tipo); 

e Initial value (valor inicial); 
e Description (descrição). 


Como os próprios nomes dos campos já são elucidativos, não fica 
complicado entendermos para que servem. No campo name, 
inserimos o nome que queremos para a variável. Para o nosso caso, 
coloque vida . No segundo campo, o tipo ( Type ), temos três opções 
possíveis: 


e Boolean (booleano): este tipo só assume dois valores, 
verdadeiro (true) ou falso (false). 

e Number (número): tipo específico para variáveis que 
representam números racionais. 

e Text (texto): tipo que guarda palavras, textos ou mesmo um 
caractere. 


Como estamos tratando o número de vidas do nosso personagem, 
escolheremos o tipo Number , que é o que faz mais sentido nessa 
situação. Mas para que você saia deste capítulo com total domínio 
dos tipos de variáveis que podemos criar, vamos explicar 
rapidamente como funcionam os outros. 


O booleano representa apenas dois valores: verdadeiro (true) ou 
falso (false). Esse tipo de variável tem origem lá na física, em que 
tudo é representado desta maneira (verdadeiro é ligado, e falso é 
desligado). Dentro do Construct 2, podemos utilizá-la de muitas 
formas. Um exemplo simples seria para saber se uma alavanca foi 
acionada pelo jogador. Poderíamos criar uma variável chamada 
acessado COM O Valor false por padrão, e somente trocá-la quando 
ela fosse acionada. Desta forma, ficaria fácil saber e usar essa 
informação para outras coisas no jogo. 


Já o tipo texto não tem segredo. Utilizamos este tipo sempre que 
precisamos trabalhar com textos dentro dos nossos jogos. Por 
exemplo, se quisermos exibir o nome do jogador dentro do jogo, 
podemos armazenar essa informação em uma variável do tipo texto 
e usá-la em qualquer lugar do jogo. Bem bacana, né? 


Exploraremos um pouco mais sobre as variáveis e seus tipos no 
decorrer do livro, mas agora é importante que você já sabe para que 
elas servem. Voltando à nossa variável vida, escolha o tipo Number . 


Em seguida, temos o campo Initial value, em que especificamos o 
valor inicial para a variável. Como desejamos que o jogador inicie 
com três vidas, qual número colocaremos neste campo? Isso 
mesmo, o número três. 


Por fim, o último campo é totalmente opcional. Ele serve para 
colocar alguma descrição na variável, para que futuramente você 
(ou seus colegas de trabalho) não esqueça o que ela faz e para que 
serve. 


Particularmente, não usamos muitos este campo, porque sempre 
preferimos criar nomes que sejam elucidativos, ou seja, que 
consigam descrever a sua razão, sem qualquer tipo de comentário 
adicional. Esta é uma prática que herdamos do mundo da 
computação e recomendamos fortemente, mas você está livre para 
trabalhar da maneira que achar melhor, ok? 


Ao final deste processo, sua variável deverá ficar igual à figura: 





Angle 0 JogadorAnimacao: Instance variables E 
Opacity 100 = 
E Position -458, 338 [+e]4 d+ 
+) Size 66, 92 Name Type Initial value 
vida 3 
Add / edit Instance variables | 
=) Behaviors 
Pin (no properties [ 
Flash (no properties 
3 ScrollTo 
Initial state Enabled 
Add / edit Behaviors 


=| Effects 


Figura 5.3: Variável local vida 


Muito bem, agora que criamos esta variável, a usaremos para saber 
quantas vidas o nosso personagem ainda tem. No início do jogo, ela 
será iniciada com três. Se levar dano de um inimigo, subtrairemos 
uma. Se sair da área visível, também subtrairemos uma. Ao final, se 
a contagem da variável for igual a zero, vamos exibir a tela de game 
over e o jogador saberá que perdeu. Bem legal, né? 


Mas antes de partir para o desenvolvimento de toda essa lógica, 
queremos introduzir as variáveis globais. Elas são parecidas com as 


que acabamos de ver, mas não estão "fixas" a um objeto, e sim ao 
contexto da folha de eventos em que foi criada. Ficou curioso? 


Variáveis globais 


Uma variável global — como o próprio nome já diz — engloba todo o 
escopo do jogo. O que isso significa na prática? Significa que todos 
os objetos e eventos podem interagir com ela, como se fossem suas 
próprias donas. Elas são apropriadas para guardar informações que 
sejam de contexto geral do jogo, como estatísticas. No nosso caso, 
vamos usá-la em outro caso recorrente: para guardar a pontuação 
do jogador. 


Neste ponto, você deve estar se perguntando como saber quando 
usar um tipo de variável e quando usar o outro. Queríamos ter uma 
resposta concreta para isso, mas infelizmente não há. Tudo 
depende de como você quer organizar o seu jogo. 


Com base em nossa experiência, utilizamos as globais somente 
para guardar informações que realmente sejam relevantes para o 
jogo como um todo, como pontuações e rankings. Por ora, siga os 
nossos passos e, quando se sentir confortável com a plataforma, 
tente outras maneiras e veja qual melhor se adapta a você. 


Seguindo com o desenvolvimento do nosso jogo, vamos armazenar 
a pontuação do jogador em uma variável global. A pontuação do 
nosso jogo será feita através dos itens coletáveis que vamos inserir 
mais à frente. Por enquanto, vamos apenas deixar o terreno 
preparado. 


Criaremos nossa variável na folha de eventos. Para isso, clique com 
o botão direito do mouse nela e selecione a opção Add global 
variable (Adicionar uma variável global). Uma janela se abrirá com o 
nome de New global variable (Nova variável global), como mostra a 
figura a seguir. 


New global variable bi 


Type | Number no 


(optional) 


sé caes 


Figura 5.4: Adicionando uma variável global 


Você vai reparar que ela é muito semelhante à janela que vimos na 
seção anterior, mas que há algumas diferenças. A primeira delas é 
que agora só podemos criar variáveis de dois tipos: Number e Text. 
A segunda é que, depois do texto de descrição, há duas caixas com 
as opções static (estático) e constant (constante). 


As variáveis que são marcadas como estáticas não reiniciam os 
seus valores quando entram dentro do seu escopo. Seus valores 
são persistidos, tornando-as globais. Não se preocupe muito em 
entender isso agora, discutiremos isso mais à frente quando 
falarmos sobre grupos. Por enquanto, saiba que toda variável global 


é marcada automaticamente como estática. Há alguns segredos 
sobre variáveis que vamos esconder de você, mas só por enquanto. 


A segunda caixa torna as variáveis para somente leitura (read only), 
ou seja, não conseguimos nunca alterar seus valores, somente ler e 
compará-los com outros. Você pode se perguntar: "Mas em que 
contexto vou querer uma variável que não muda de valor?". 


Sabemos que isso parece meio estranho à primeira vista, mas elas 
são bastante úteis, por exemplo, para gravarmos valores que são 
referências para outras tarefas. Poderíamos armazenar o valor da 
força da gravidade nela e fazer com que tudo fosse calculado de 
acordo com isso. Ou poderíamos armazenar o valor de uma 
constante para usar dentro de uma fórmula matemática, como o PI. 


Há vários contextos em que elas seriam úteis. Mas fique tranquilo, 
não usaremos variáveis constantes. Entretanto, tenha em mente a 
sua utilidade. 


Com a janela de criação de variáveis, preencha o campo name com 
o valor pontos, O campo type com a opção Number , e coloque o 
número zero como Initial value . Fique à vontade para adicionar 
uma descrição e deixe as caixas a seguir desmarcadas. Ao final, ela 
deve ficar desta maneira: 


Edit global variable 


to 


Number v 
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Figura 5.5: Variavel global 


Muito bem! Preparamos o sistema de vidas, e iniciamos o sistema 
de pontuação do nosso jogo utilizando as variáveis locais e globais. 
Nosso próximo passo será inserir os inimigos no jogo. 


5.2 Inimigos 


Agora que já temos o nosso personagem com movimentos, 
animações e vidas, vamos começar a dificultar a vida dos nossos 
jogadores colocando inimigos no jogo. Para este projeto, 
planejamos três tipos de inimigos, mas, após concluí-los, fique à 
vontade para deixar sua criatividade fluir e adicionar mais tipos. Por 
ora, Siga OS Nossos passos, ok? 


Então, ao adicionar inimigos, precisamos criar uma inteligência de 
movimentação e configurar cada uma de suas ações em relação ao 
personagem. Queremos que, quando o personagem encoste neles, 
perca uma vida e sinalize que recebeu dano. 


Entretanto, nosso personagem não será totalmente indefeso. 
Também configuraremos que, se ele acertar os inimigos por cima, 
eles morrem. Vamos nessa? 


Inserindo os inimigos 


Para começar o desenvolvimento dos inimigos, adicione uma nova 
Sprite na camada Jogador com o nome de inimigo1 . Agora, para 
ajustarmos sua animação (assim como fizemos com o personagem 
principal), adicione dois quadros para a animação padrão. Ao criar 
os quadros, importe as imagens de nome bolinhai € bolinha2 que 
estão no diretório chamado Inimigos, dentro da pasta de recursos 
do livro. 


Feito isso, nosso inimigo terá uma animação, mas ela está estranha, 
pois a sua velocidade padrão é muito alta para apenas dois 
quadros. Para ajustá-la, vá até a barra de propriedade e altere a 
propriedade speed (velocidade). Mude o seu valor para três. 


Por fim, vamos fazer com que a animação se repita para sempre 
enquanto o inimigo estiver vivo. Para isso, procure pela propriedade 
Loop (repetição) e coloque o valor yes. 


Properties 

24 

=| Animation ‘Default’ properties 
speed 3 
Loop Yes 


Y 
Y 


Repeat count | 

Repeat to 0 

Ping-pong No 
More information Help 


Figura 5.6: Velocidade da animagao 


Agora sim! Para verificar como ela está, clique com o botão direito 
em cima do seu nome (no caso, a Default ), e selecione a opção 
Preview, COMO mostra a figura a seguir: 


Animations 





EL Detal [E 


Add animation 





Add subfolder 


Duplicate 





Rename 


Delete 


Expand all 
Collapse all 








Help 


Figura 5.7: Selecionando Preview 


Na pequena janela que abrir, veremos como esta a movimentação 
do nosso primeiro inimigo do jogo. 


Pr XxX 





Figura 5.8: Preview da animação 


Bem legal, né? Só não se esqueça de colocar o ponto de origem no 
centro e no meio (bottom) dos dois frames do inimigo1 , como já 
fizemos com a maior parte dos itens que montamos até agora. 


Agora repetiremos basicamente os mesmos passos para adicionar 
os dois outros tipos de inimigos restantes. Adicione uma outra 
Sprite para nosso outro inimigo com o nome de inimigoz. 
Novamente, insira dois quadros e coloque neles as imagens peixe1 
e peixe2 , que também estão na pasta Inimigos . Configure as 
propriedades speed € Loop. Por fim, adicione o ponto de origem no 
centro e no meio dos dois frames. 


Para finalizar, faça o mesmo processo para o terceiro inimigo. 
Chame-o de inimigo? e use as imagens abelhai € abelha2 NOS 
quadros. As configurações das propriedades e o ponto de origem 
também devem ser os mesmos que os demais. 





Figura 5.9: Os três tipos de inimigos 


Muito bem! Colocamos os nossos três inimigos dentro do jogo. Mas 
está faltando alguma coisa, não é mesmo? Nossos inimigos ainda 
não têm vida nenhuma, são objetos estáticos. Na próxima seção, 
iniciaremos a programação de sua inteligência artificial. 


Programando a inteligência dos inimigos 


Já temos todos os inimigos inseridos no layout, agora podemos 
começar a programar sua inteligência. Você deve ter reparado, ao 
adicionar as imagens, que eles estão em posições diferentes. 
Enquanto os dois primeiros estão na horizontal, o terceiro está na 
vertical. Isso é proposital. 


Faremos com que o segundo e o terceiro inimigos (ou seja, a abelha 
e o peixe) se movam na vertical, enquanto a pequena bolinha 
caminhe na horizontal. Ao final do processo, nossa abelha voará, o 
peixe pulará da água e bolinha vai rastejar pelo chão. Para alcançar 
isso, faremos o uso de comportamentos e variáveis. 


Inicie selecionando O inimigo1 , va até a barra de propriedade e 
insira uma variável local — como já aprendemos anteriormente — do 
tipo number . Coloque o nome movendo e o valor zero como padrão. 
Faça o mesmo para O inimigos. Isso sera útil para programar os 
eventos na próxima seção, já voltaremos a eles. 


Agora selecione novamente O inimigo1 e insira o comportamento de 
plataforma. Isso fará com que ele se mova pelo chão. Para o 


inimigo3 , Insira O comportamento de sine . Este move o objeto de 
acordo com o resultado de funções matemáticas, como já 
explicamos anteriormente. Adicione os seguintes parâmetros a 
seguir ao comportamento, para que ele se mova de forma vertical: 


=| Behaviors 
=| Sine 
Active on start Yes 
Movement Vertical 
Wave Sine 
Period 1 


Perod random 10 
Period offset 0 
Period offset ra.. O 
Magnitude 50 
Magnitude ran.. 100 





Figura 5.10: Behavior Sine no inimigo3 


Maravilha, já deixamos a primeira parte da inteligência dos nossos 
inimigos pronta. Agora, vamos desenvolvê-los separadamente. 


Programando o primeiro inimigo 


Vamos adicionar os eventos referentes à movimentação do 
inimigo1 . Para este, queremos que ele se mova no chão na direção 


do jogador (à esquerda) assim que ele se tornar visível na tela. Ou 
seja, antes disso, ele deve esperar quietinho. 


Para ter este comportamento, o primeiro passo é saber se ele está 
dentro da área visível do jogo. Faremos isso entrando na nossa 
folha de eventos e adicionando um novo. Selecione O inimigo € 
escolha a opção compare x (comparar x). Com essa condição, 
conseguimos validar se a posição X do personagem está dentro da 
área visível. 


Escolha esta opção e insira o valor -100 (este valor não é mágico, 
estamos usando-o por causa do tamanho da janela que escolhemos 
para o jogo). Deverá ficar assim: 


Parameters for inimigo: Compare X 


How to compare the X co-ordinate. 


Comparison |> Greater than x 


Cancel Help on expressions Back 


Figura 5.11: Comparando o valor de X 


Colocaremos uma nova condição nesse mesmo evento, que 
verificará se O inimigos está se movendo pela variável local movendo 
já criada. Vamos verificar da seguinte maneira: se a variável movendo 
for igual a um, O jogador estará se movendo; se for igual a zero, 
estará parado. 


Para isso, clique no canto ao lado esquerdo e selecione a opção 
add (adicionar) e, em seguida, add another condition (adicionar nova 


condição). Selecione novamente O inimigoi e escolha a condição 
Compare instance variable (comparar variáveis de instância). Isso fará 
com que possamos comparar o valor de variáveis locais. 


No caso, queremos ver se a variável local movendo é iguala um. 
Para isso, coloque os parâmetros a seguir: 


Parameters for inimigo: Compare instance variable 


Choose the instance variable to compare. 


Instance variable |a movendo “e 


Comparison |= Equal to ne 


Cancel Help on expressions Back Done 


Figura 5.12: Comparando variáveis de instância 


Para a ação desse evento, selecione O inimigo1 novamente e 
escolha a ação simulate Control . Como escolhemos o 
comportamento de plataforma para ele, conseguimos simular o seu 
movimento com essa ação. Como o nosso jogo acontece da 
esquerda para a direita, faremos com o inimigo se mova para a 
esquerda. 


Para isso, na janela que abrir, coloque o valor Left (esquerda) em 
Control (controle): 


Parameters for inimigo (Platform): Simulate control 


The movement control to simulate pressing. 


Cancel Help on expressions Back 


Figura 5.13: Simulate control 


Então, se O inimigo1 estiver se movendo, ele simulará o movimento 
de plataforma para a esquerda. Vamos adicionar outro evento para 
sempre setar a variável local movendo para um Se O inimigo1 estiver 
se movendo, como explicamos anteriormente. 


Para isso, selecione novamente O inimigo1 na janela add event € 
adicione a condição Is on-screen. Para a ação desse evento, 
selecione O inimigoi €, em set value, coloque o valor de sua 
variável local movendo com o valor 1. 


Parameters for inimigo: Set value 


Choose the instance variable to change. 


Instance variable |,» movendo “e 
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Figura 5.14: Set value 


Pronto, os eventos correspondentes ao nosso inimigo1 já estão 
conluídos. Ao final, sua folha de eventos deve estar assim: 


Movimentação do inimigo1 


d inimigo 1 X > -100 inimigo? Simulate A Platform pressing Left 
inimigo? movendo = 1 
inimigo 1 Is on-screen d inimigo Set movendo to 1 


Figura 5.15: Movimentação do inimigo 1 


Programando o inimigo2 


Vamos partir para O inimigo2 . Para este, usaremos três eventos 
diferentes. 


1. O primeiro será responsável por fazer o inimigo pular a cada X 
segundos; 

2. O segundo vai controlar o quadro de animação para quando ele 
estiver pulando; 

3. O terceiro vai fazer o contrário do segundo. 


Para realizarmos o primeiro evento, selecione o objeto system 
(objeto de sistema) na janela add event . Escolha a condição 
chamada Every x seconds (a cada X segundos). Como o próprio 
nome diz, conseguimos definir ações para que se repitam a cada 
ciclo de X segundos. 


Para o nosso jogo, inicialmente usaremos 1,5 segundos. Para 
configurar este número, coloque-o no parâmetro Interval 
(intervalo), conforme mostra a figura: 


Parameters for System: Every À seconds 


Specify time, in seconds, between running the actions. Interval is limited by the 
framerate (actions will not run more than once per tick). 


aia i 
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Figura 5.16: Every X seconds 


Na ação deste evento, selecione O inimigo2 e escolha a ação 
Simulate Control . Lembra-se de que usamos esta mesma ação no 
primeiro inimigo? Agora vamos configurá-la de forma diferente. Na 
janela que abrir, coloque o valor Jump (pulo) no campo control . Isso 
fará com que O inimigoz pule. Muito bem, configuramos o primeiro 
evento da nossa lista. 


Para o segundo evento, selecione novamente O inimigoz € 
selecione a condição Is jumping (está pulando). Ela verifica se o 
objeto em questão está pulando ou não. Vamos capturar esse pulo 
do inimigo para trocar o seu quadro de animação. Para fazer isso, 
na ação desta condição, selecione novamente O inimigo € vá à 
opção set frame . NO campo Frame number , coloque o valor O. 


Lembre-se de que o zero representa o primeiro quadro da animação 
do personagem. 


Parameters for inimigos: Set frame 


The animation frame number to set (D-based). 
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Figura 5.17: Setando o valor do frame 


Feito isso, temos de partir para o terceiro item da lista, o evento 
contrário ao que acabamos de criar — ou seja, mudar o quadro de 
animação para quando o inimigo não estiver mais pulando. 
Selecione o objeto system e a condição Else para ele. 


A condição Else sempre representa o caminho alternativo de uma 
dada condição. Como fizemos uma condição para quando o inimigo 
pular, conseguimos usar O Else para dizer o que o jogo deve fazer 
quando ele não estiver pulando. 


Na ação selecione O inimigoz, Vá em set frame €, NO campo Frame 
number , Coloque o valor 1. Os eventos da movimentação do inimigoz 
devem estar assim na sua folha de eventos: 


Movimentação do inimigo2 





+ System Every 1.5 seconds Q inimigo2 Simulate A Platform pressing Jump 
RR P == - A o: ae 

inimigo2 A Platform is jumping inimigo2 Set animation frame to 0 
+ System Else © inimigo2 Set animation frame to 1 


Figura 5.18: Movimentação do inimigo 2 


Tudo certo? Perfeito. Vamos ao inimigos. 
Programando o Inimigo3 


Como O inimigo3 ja tem o comportamento de sine inserido, nao 
precisamos adicionar os seus movimentos aqui. Já os configuramos 
nas propriedades do próprio comportamento anteriormente. 


5.3 Jogador versus Inimigos 


Fizemos um excelente trabalho configurando a "inteligência" dos 
inimigos dentro do jogo. Mas você deve ter notado que, até então, 
eles são inofensivos. Por que será? 


Acontece que ainda não configuramos as colisões entre o nosso 
jogador e os seus inimigos. Ou seja, por enquanto, eles são 
indiferentes uns aos outros. Nesta seção, vamos alterar isto. 


Jogador versus Inimigo1 


O inimigol Será o único que o nosso personagem vai conseguir 
"destruir" no jogo. Faremos com que, caso o jogador consiga atingi- 
lo em cima de sua cabeça, ele morrerá. Este comportamento é 
muito comum em jogos de plataformas. Com toda a certeza, vieram 


a sua mente jogos como Mario, Sonic e Crash, em que alguns 
inimigos são atingidos quando pulamos em suas cabeças. 


Escolha o objeto Jogador na janela de adição de eventos ( Add event ) 
e escolha a opção on collision with another object (na colisão com 
outro objeto). Este evento é disparado quando um objeto entra em 
colisão com outro. 


Vamos configurar inicialmente o que acontece quando o nosso 
jogador colide com o inimigo1 . Quando isso acontecer, queremos 
que o nosso personagem perca uma das vidas e pisque por alguns 
segundos, indicando para quem está jogando que ele acabou de 
levar dano. Caso ele acerte a cabeça do inimigo, o jogador sai 
invicto. 


Iniciaremos configurando o evento para quando acertarmos a 
cabeça do inimigo. Para isso, na janela que abrir, no campo object, 
clique sobre <click to choose> , como mostra a figura: 


Select the object to test for a collision with. 
Object <dick to choose > 
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Figura 5.19: On collision with another object 


Escolha o nosso inimigo1 , como vemos a seguir: 


Parameters for Jogador: On collision with another object 


Select the object to test for a collision with. 


Object 





inimigo À 


Cancel Help on expressions Back 


Figura 5.20: Escolhendo o objeto da colisão 


Agora, vamos colocar dois subeventos nesse evento para quando o 
valor do Y do Jogador for menor que o valor Y do inimigo . Isto é, 
quando o Jogador colidir por cima do inimigo1 , este será destruído; 
caso contrário, se O Jogador estiver piscando ( Is flashing ), ele vai 
perder uma vida e setar o quadro de animação da sprite coracoes . 


Vale lembrar como criamos um subevento: clique com o botão 
direito do mouse no canto esquerdo da condição inserida e 
selecione a opção add . Em seguida, clique em add sub-event . 


Para o primeiro subevento, queremos comparar se o valor da 
coordenada Y do Jogador é menor que a coordenada Y do inimigo1 . 
Para isso, selecione o objeto Jogador e a condição compare Y. 
Adicione os seguintes parâmetros para fazer a verificação do valor 
de Y: 


Parameters for Jogador: Compare Y 


How to compare the Y co-ordinate. 


Comparison | Less than ~ 


Y co-ordinate |inimj go1Y 
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Figura 5.21: Comparando o valor de Y 


Ótimo. Agora, para que a animação do personagem não fique 
estranha ao pular na cabeça do adversário, faremos com que ele dê 
um leve pulo para cima ao atingir o alvo. Conseguimos fazer isso 
usando a ação set vector Y . Ela é responsável por configurar a 
posição do objeto no eixo Y. 


Vamos escolher o objeto Jogador e a ação set vector y . Então, 
coloque o valor -700 no campo vector Y : 


Parameters for Jogador (Platform): Set vector Y 


The new vertical movement vector, in pixels per second. 
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Figura 5.22: Set vector Y 


Talvez você se pergunte por que estamos usando um valor negativo 
no eixo Y, sendo que queremos fazer com que ele pule. Fazemos 
isso porque o ponto de origem do plano cartesiano que define a 
posição dos objetos dentro do jogo está no canto superior esquerdo 
do seu monitor. Logo, para que o jogador vá para cima, temos de 
subir negativamente o eixo Y. 


No nosso caso, configuramos 700 pixels. Se usarmos um valor 
positivo, em vez de subir, ele acabará descendo. Engraçado, né? 
Parece confuso a princípio, mas é só lembrar que o ponto de 
referência está no canto superior esquerdo do seu monitor. 


Falta adicionar mais uma ação nesse evento. Nosso inimigo não 
pode ficar na tela depois de o destruirmos. Para remové-lo, 
usaremos a ação Destroy (destruir). Dentro dela, selecione agora o 
inimigol e dê a ação de Destroy . Isso fará com O que O inimigo1 
seja destruído do jogo. 


Perfeito, configuramos como eliminar o inimigo. Agora falta o 
segundo subevento, no qual configuraremos o que acontece quando 
o personagem toca o inimigo em qualquer outro lugar. Selecione o 
objeto de sistema ( system ) na janela add event . Escolha a condição 


Else €, NO mesmo evento, coloque mais uma condição, como já 
fizemos anteriormente. 


Clique com o botão direito do mouse no canto esquerdo da condição 
inserida. Selecione a opção add e, depois, em add another condition 
(ou clique em c do seu teclado). Selecione O Jogadoranimacao € a 
condição Is flashing . No evento criado, clique com o botão direito 
do mouse em cima do Is flashing e selecione a opção Invert 
(inverter); isso fará com que a ação seja invertida. 


Colisão com o inimigo? Edi 
= E ae E) Add th diti 
= p On collision with “2 inimigo1 z O ATE 


a €) Replace condition 
I ii Ald dec mei €) Replace object 


Toggle disabled 
Toggle bookmark 
Toggle breakpoint 


Cut Shift+Delete 


Ox OBS 


Copy Ctrl+C 
dk System Else Paste 


© JogadorAn... Is flashing 


Ctrl+V 


| 
Lp 


Delete 


Eb. 


Figura 5.23: Is flashing 


Só queremos que o jogador perca uma vida quando ele não estiver 
piscando. Para a ação desse evento, selecione jJogadorAnimacao e dê 
a ação subtract from (subtrair de). Isso fará com que seja subtraído 
um determinado valor — no nosso caso, queremos subtrair 1 da 
variável vida do nosso personagem. Para isso, coloque os 
parâmetros seguintes na janela que abrir: 


Parameters for Jlogadorânimacao: Subtract from 


Choose the instance variable to change. 


Instance variable É vida “e 
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Figura 5.24: Subtract from 


Na outra ação, selecione novamente O Jogadoranimacao € a ação 
Flash , para fazer a animação do jogador piscar. Não mude os 
parâmetros da janela que vai abrir em seguida, pois queremos 
exatamente esse valor de duração e tempo para o comportamento 
de piscar. Então, clique em Done. 


Parameters for Jogadorânimacao (Flash): Flash 


Duration in seconds the object is visible, 


bi 
— 
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Figura 5.25: Flash 


Os eventos de colisão do inimigos deverão ficar igual aos da figura 
a seguir: 





© E On collision with inimigos 


A Jogador Y < inimigo 1.Y I Jogador Set A Platform vector Y to - 700 
d inimigo 1 Destroy 
SF system Else > JogadorAnimac.. Subtract 7 from vida 
= JogadorAnimacao X Is flashing > JogadorAnimac... g Flash: Flash 0.1 on 0.1 off for 1.0 seconds 


Figura 5.26: Jogador versus Inimigo1 


Agora, se tocarmos no inimigo, perdemos uma vida, e o nosso 
jogador fica piscando por um breve período. Quando ele estiver 
piscando, ele fica invulnerável por um tempo, dando um espaço 
para o jogador se recompor. Depois deste pequeno tempo, ele fica 
vulnerável a danos de novo. 


Para OS próximos inimigos, nosso personagem não será capaz de 
atingi-los. 


Jogador versus Inimigo2 


Para o segundo inimigo, vamos criar somente um evento para, 
quando O Jogador não estiver piscando, perder uma vida ao colidir 
com ele. O processo é muito semelhante ao que já fizemos, então, 
será fácil. 


Para isso, escolha o objeto Jogador na janela de adição de eventos 
( Add event ) e escolha a opção on collision with another object . Na 
janela que abrir, escolha O inimigoz NO campo object : 


Parameters for Jogadorânimacao: On collision with another object 


Select the object to test for a collision with. 


Object | al 
o. inimigo? 
Cancel Help on expressions Back Done 


Figura 5.27: On collision with another object 


Coloque uma segunda condição nesse evento e selecione o 
JogadorAnimacao € a condição Is flashing . No evento criado, clique 
com o botão direito do mouse em cima do Is flashing e selecione a 
opção Invert , portanto, ele só perderá vida se não estiver piscando. 


Na ação desse evento, coloque as mesmas ações que colocamos 
NO inimigo1 para subtrair uma vida e fazer o nosso personagem 
"piscar". Relembre que, para subtrair um ponto de vida, selecione 


JogadorAnimacao , dê a ação Subtract from e escolha um no campo 
value . E para fazer o jogador piscar, selecione O Jogadoranimacao € a 
ação Flash e, então, clique em Done. 


Você terá o seguinte evento para O inimigo2 : 





= = JogadorAnimacao On collision with ® => JogadorAnimacao = Subtract 7 from vida 
inimigo? = JogadorAnimacao g Flash: Flash 0.1 on 0.1 off for 1.0 
= JogadorAnimacao X Is flashing seconds 


Figura 5.28: Jogador versus Inimigo2 
Jogador versus Inimigo3 


Para O inimigos vamos fazer o mesmo evento anterior. A única 
diferença aqui é que colocaremos O inimigo3 NO campo object, Na 
janela on collision with another object , pois agora vamos programar 
as ações dO inimigo 


Seu evento ficará assim: 





“> = JogadorAnimacao On collision with Sw > JogadorAnimacao Subtract 7 from vida 
inimigo3 > JogadorAnimacao g Flash: Flash 0.1 on 0.1 off for 1.0 
= JogadorAnimacao % Is flashing seconds 


Figura 5.29: Jogador versus Inimigo3 


Maravilha. Configuramos todos os comportamentos adequados para 
OS inimigos, desde suas animações, movimentações e até o que 
deve acontecer quando o personagem tocar neles. Fique à vontade 
para alterar os valores que sugerimos e brinque com o que fizemos. 


Nos próximos capítulos, trabalharemos com um sistema de 
pontuação e de fim de jogo, para quando o personagem ficar sem 
vidas. 


CAPÍTULO 1 
O Construct 2 


O Construct 2 é um game engine para desenvolvimento e criação de 
jogos digitais multiplataforma em 2D. Baseado em HTMLS, foi 
desenvolvido pela empresa Scirra Ltda (https://www.scirra.com/) e 
lançado em 2011. 


Ele é destinado a qualquer pessoa interessada na criação de jogos 
de forma simples, prática e com pouco conhecimento de 
programação e design de games. A plataforma é baseada no 
conceito drag-and-drop para desenvolver lógicas e mecanismos, e 
não é preciso escrever nenhuma linha de códigos em uma 
linguagem específica. 


O usuário só precisará de um editor visual e um sistema de lógica 
baseada em comportamento. Também não é necessário ter 
conhecimentos técnicos para desenvolver, somente criatividade e 
vontade de tirar a ideia do papel. Por isso, esta é uma das engines 
mais intuitivas do mercado. 


O Construct 2 consagrou-se como uma das ferramentas mais 
recomendadas e utilizadas por iniciantes para desenvolvimento de 
jogos em 2D. Essa ferramenta facilita a vida do desenvolvedor, sem 
abrir mão de recursos avançados, como: requisições na internet 
com AJAX, escrita e leitura de arquivos em XML (eXtensible Markup 
Language) e modo multiplayer (local e online). Esses e muitos 
outros recursos serão abordados no decorrer do livro. 


1.1 Versões e licenças 


Antes de continuar, é importante conhecer as versões e licenças 
que a ferramenta oferece. O Construct 2 encontra-se atualmente na 


versão 244, e está disponível em três licenças diferentes: Free, 
Personal e Business. Vamos entender as diferenças entre cada uma 
delas. 


Versão free (gratuita) 


É possível utilizar o Construct 2 sem qualquer custo para poder 
conhecer, aprender e estudar. Esta versão é recomendada para 
quem está iniciando com a ferramenta e não pretende lucrar com as 
suas criações. Como é gratuita, conta com uma série de limitações, 
tais como: 


e Impossibilidade de comercializar os jogos; 

e Máximo de 100 eventos por projeto; 

e Máximo de 4 camadas em um layout; 

e Máximo de 2 efeitos por projeto; 

e Sem organização de pastas na barra do projeto; 

e Sem possibilidade de pesquisa de evento; 

e Sem barra de configurações; 

e Sem possibilidade de agrupar em familias; 

e Sem pré-visualização na LAN; 

e Bloqueio de exportação para rodar em multiplataformas como: 
Android, iOS, PC ou Wii U. Só é possível exportar para HTML 5 
e, posteriormente, hospedar em um domínio HTTPS (Hyper 
Text Transfer Protocol Secure). 


Todos os limites da edição gratuita são removidos após adquirir uma 
licença comercial. No entanto, as regras para uso comercial são 
diferentes para indivíduos e organizações. Veja mais a seguir. 


Personal License (paga) 


Essa versão é recomendada para desenvolvedores independentes, 
ou para usuários que já possuem certa familiaridade com a 
plataforma e desejam comercializar suas criações. Com esta 
licença, os jogos podem ser vendidos até alcançar uma receita 
máxima de US$ 5.000,00 (cinco mil dólares) — incluindo publicidade/ 


promoção associada. Ultrapassando este valor, uma licença 
comercial deverá ser adquirida. 


É interessante saber que organizações sem fins lucrativos — 
como escolas, bibliotecas e universidades — podem usar essa 


licença para remover os limites da edição gratuita. Nessas 
situações, estão disponíveis descontos em massa. 





Business License (paga) 


Esta é a licença que oferece todos os recursos disponíveis, por isso, 
é indicada para empresas com alto faturamento, sem limite de 
receitas. O pagamento é realizado uma única vez. 


Ainda sobre as licenças, vale ressaltar: 


e Todas são vitalícias e associadas ao usuário, ou seja, podem 
ser migradas em outras máquinas. 

e Todas as licenças devem ser compradas diretamente no site da 
Scirra ou na plataforma Steam. 

e Tantos as licenças quanto os demais recursos disponíveis na 
loja virtual da Scirra podem ser comprados com a moeda local 
(R$) no cartão de crédito, débito ou boleto bancário. Neste 
Último caso, o usuário só recebe sua chave após a confirmação 
de pagamento do boleto, que pode de demorar de 1 até 2 dias 
úteis. 

e As licenças pagas também oferecem uma série de 
funcionalidades extras, como: plugins, pacotes de gráficos e 
outras ferramentas adicionais. Você encontra todas estas 
informações na íntegra no site da Scirra. 


VOU PRECISAR INVESTIR PARA PODER FAZER MEUS JOGOS? 


Não será necessário comprar uma licença para seguir o 
aprendizado e resolver os exercícios propostos no decorrer do 


livro! Mas se futuramente você tiver interesse de comercializar 
suas produções, será necessário, pelo menos, a Personal 
License. 





1.2 Sistemas suportados 


O Construct 2 está disponível apenas nas versões do sistema 
operacional da Microsoft. Os requisitos de sistema recomendados 
são: 


e Sistema operacional: Windows XP/ Vista/ 7/8 /10 

e Processador: 2 GHz dual core 

e Memoria: 2 GB RAM 

e Graficos: qualquer placa NVIDIA ou AMD com os drivers 
atualizados 

e HD: 5 GB de espaço livre 


Vale a pena ressaltar que a plataforma no Construct 2 só é 
disponível para Windows, porém, os jogos criados por ele funcionam 
em qualquer sistema operacional, como Linux ou Mac. Ele também 
é portátil, então, você poderá instalá-lo em um cartão de memória 
USB, por exemplo, e levá-lo aonde quiser! 


NÃO POSSO USAR O CONSTRUCT NO LINUX OU NO MAC? 


O Construct 2 foi construído utilizando bibliotecas únicas no 
sistema operacional da Microsoft, entretanto, há alternativas 
para se poder trabalhar com ele em outros sistemas. A primeira 
opção é instalar uma máquina virtual usando programas como o 
VirtualBox ou o VMware. 


A segunda opção é trabalhar com a versão beta do Construct 3. 
Ela é muito semelhante ao Construct 2, mas está em fase teste, 
possui um visual diferente e funciona diretamente no navegador. 
Falaremos melhor sobre isso mais à frente. 





1.3 Instalação 


Há duas maneiras de instalar o Construct 2 em sua máquina: pelo 
download do executável no site oficial da Scirra, ou por meio da 
plataforma Steam. 


Download pelo site da Scirra 


Se optar por fazer o download no site da Scirra, primeiramente 
acesse https://www.scirra.com/construct2 e clique no botão Free 
Download , conforme mostra a figura: 


EASILY 


Construct 2 YOU 


Buy Now 


Or learn more about Construct 2 





Figura 1.1: Download no site da Scirra 


Quando for redirecionado, o download deve ser iniciado 
automaticamente. Caso isto não ocorra, basta clicar no Try again. 


Thanks for Choosing Construct 2! 


You're now downloading Construct 2 r239 
Download hasn't started? Try again 


Whilst you're downloading... 


Figura 1.2: Obrigado por escolher o Construct 2! 


Apos o término do download, o instalador deve ser executado e a 
opção I Accept the agreement marcada. Depois, clique no botão next. 


jB) Setup - Construct 2 — 


License Agreement 
Please read the following important information before continuing. 





Please read the following License Agreement. You must accept the terms of this 
agreement before continuing with the installation. 









-USER LICENSE AGREEMENT FOR SCIRRA CONSTRUCT 2. IMPORTANT: 
READ THE TERMS AND CONDITIONS OF THIS LICENSE AGREEMENT 


-User License Agreement CEULA") is a legal agreement between you (either 
individual or a single entity) and Scirra Ltd, for the software product(s) 


epresents the entire agreement concerning the program between you and Sarra 
td, (referred to as “Yicenser”), and it supersedes any prior proposal, x 


(0) 1 accept the agreement 
(DI do not accept the agreement 





| Next> | | Cancel 


Figura 1.3: Acordo de licença 


Agora é preciso informar qual versão será instalada, 32-bit ou 64- 
bit. Caso você não saiba qual é a arquitetura do computador, deixe 
selecionada a opção auto-detect what kind of computer I have, que 
identificará automaticamente qual é. Então, clique em next. 


j5 Setup - Construct 2 — 


Select install type 
Install either the 32-bit or 64-bit version of Construct 2 





There are both 32-bit and 64-bit versions of Construct 2 available. If you're not sure 
which to choose, leave this on ‘Auto-detect’. 


Auto-detect what kind of computer I have v 


Auto-detect what kind of computer I have 


Install Construct 2 for 32-bit computers 
Install Construct 2 for 64-bit computers 





cent [RES] | conc 


Figura 1.4: Tipo de instalagao 


Se vocé desejar criar um atalho na sua Area de Trabalho, marque 
na janela seguinte a opção create a desktop icon. Em seguida, clique 
em Next para prosseguir e, por ultimo, em Install para finalizar a 
instalação. Na ultima tela do instalador ha várias opções, para uso 
de navegadores como o Google Chrome e o Mozilla Firefox 


recomendados pela Scirra. Após escolher a opção, clique em 
Finish. 





fey Setup - Construct 2 


Completing the Construct 2 Setup 
Wizard 


We recommend checking for a graphics driver update to 
prevent driver issues affecting Construct 2. 


Scirra also recommends the Google Chrome or Mozilla Firefox 
browsers for use with Construct 2. 

L] Get Google Chrome 

C] Get Mozilla Firefox 

Launch Construct 2 








Figura 1.5: Instalação completa 


Agora, o Construct 2 já está instalado no seu sistema e pronto para 
ser usado! 


Download pela plataforma Steam 


Se o download for pela Steam, primeiramente é necessário criar 
uma conta gratuita e ter essa plataforma em seu computador. Entre 
no site da Steam, em http://store.steampowered.com/, e clique no 
icone superior Instale o Steam para baixá-la, conforme mostra a 
figura seguinte. 





Figura 1.6: Instalação da Steam 


Depois de instalada, acesse-a com a sua conta. Com a plataforma 
aberta, procure por construct 2 na loja. 


Sua loja ~ Jogos ~v Software v» Hardware w Vídeos ~» Notícias 


Construct 2 
STAQUES E RECOMENDADOS -~ AoT 


fe Construction Simulator 2015 
R$ 27,99 


Construction Machines 2014 
R$ 19,99 


q. t = ne Construction Machines Simulator 2016 
HE FRIENDSHIP RUINING GAME RE ba ees Rs 19,99 


— E = Construction Simulator 2015: Vertical S.. 
tf Gratuito 





Figura 1.7: Loja Steam 


A seguir, abrirá uma pagina com informações do Construct 2 e com 
as opções de download, tanto da versão gratuita como das pagas: 


Iniciar Construct 2 


Comprar Construct 2 Personal 


Comprar Construct 2 Business 





Figura 1.8: Escolha uma licença 


Depois de escolher a licença, vai abrir uma aba com as informações 
do download. 


Instalar — Construct 2 Free 


i prestes a instalar Construct 2 Free. 


W| Criar um a 


Criar atalho no menu Iniciar 


Mm disco Ne 
wm disco disponive 3 T MB 
45 minutos e 22 se 


Escolha o local de instalace 


Instalar em CAProgram Files {x866 ASleam 


AVANÇAR > 


Figura 1.9: Informações do download 


Clique no botão avançar. 


CANCELAR 





Instalar — Construct 2 Free 


oad de Construct 2 Free. Você pode ver o progresso 


Caso saia do Steam, o download sera retomado automaticamente ao 
reabrio 


Não exibir esta página novamente 


Gerenciar downloads 


CONCLUIR 





Figura 1.10: Instalar 


Na aba dessa imagem, basta clicar em concluir, e o processo do 
download vai começar. Uma vez finalizado, estará pronto para uso! 


1.4 Plataformas que o Construct 2 desenvolve 


Um dos grandes pontos altos da ferramenta, além da sua facilidade, 
é a possibilidade de programar o jogo somente uma vez e poder 
exportá-lo para uma grande quantidade de plataformas diferentes. 
Isso deve-se ao fato de que todos os jogos são criados e exportados 


em JavaScript por debaixo dos panos, por meio da tecnologia 
oferecida pelo Apache Cordova (https://cordova.apache.org/), um 
projeto de código aberto mantido pela Apache Software Foundation. 
Ele nos permite construir aplicações desktop e mobile usando 
tecnologias web, como HTMLS, CSS e JavaScript. 


Como já foi ressaltado, na versão gratuita só é possível exportar 
para HTML5 e posteriormente hospedar em um domínio HTTPS. 
Porém, as versões Personal e Business permitem exportar jogos 
para os seguintes dispositivos e sistemas: 


e Web (HTML5); 

Wii U; 

iOS; 

Android; 

Windows Phone 8; 
Blackberry 10; 
Windows; 

Mac OS X; 

Linux; 

Firefox Marketplace; 
Tizen; 

Facebook; 

Chrome Web Store; 
Amazon Appstore. 


Nos proximos capitulos, vamos aprender como exportamos os jogos 
para essas plataformas. 


Jogos famosos ja criados 


Ha milhares de jogos que foram criados com a plataforma desde o 
seu lançamento. Somente no site da Scirra Arcade 
(https://www.scirra.com/arcade/), ha mais de 12.500 jogos 
publicados. Dentre eles, ficam em destaque os que possuem as 
melhores classificações entre os usuarios. 


Veja alguns dos sucessos criados com o Construct 2: 


Título 


There Is No Game 


Tag 


Accelo alone 


Dreams and Reality 


Informações 


Criado por: Kamizoto 

Classificação: 4/5 estrelas 
Jogadores/Plays: 376.628 / 747.013 
Data de publicação: 26/06/2016 


Criado por: Joeriri 

Classificação: 4/5 estrelas 
Jogadores/Plays: 22.285 / 106.225 
Data de publicação: 28/05/2015 


Criado por: Baursak 
Classificação: 4/5 estrelas 
Jogadores/Plays: 12.354 / 73.923 
Data de publicação: 13/07/2015 


Criado por: AlceX 

Classificação: 4/5 estrelas 
Jogadores/Plays: 9.539 / 16.297 
Data de publicação: 19/06/2016 


Muitos desses jogos ganharam prêmios importantes em 


competições, e também foram publicados em outras plataformas 
além da web, como plataformas mobile ou até mesmo no Wii U. 


1.5 Scirra Store 


A Scirra, desenvolvedora do Construct 2, também mantém uma loja 
oficial para a plataforma, a Scirra Store. Nela é possível encontrar 
não só as licenças e os jogos prontos, mas também vários outros 


recursos: 


e Arquivos de imagens (personagens, cenários etc.); 


e Áudios (músicas e sons de efeitos); 

e Templates (jogos pré-construídos); 

e Tilemaps (imagens para construção de cenários); 

e Fontes customizadas (para textos e menus); 

e E-books (livros com documentação e dicas); 

e Bundles (pacotes com vários recursos com preços 
diferenciados). 


Vale lembrar que todos os produtos podem ser pagos com a moeda 
local (R$), mesmo que o site esteja em inglês. Porém, também há 

muitos produtos gratuitos que podem ser usados. Só é preciso ficar 
atento à licença de uso de cada um, já que alguns desenvolvedores 
não permitem que você utilize os seus recursos para fins lucrativos. 


€) SCIRRA Construct 2 Manua utorials rcade og orums ucation Register or Login 


Empty! 
RSO 
View Basket | Checkout PROGRAMMING NOT REQUIRED! 


=" 
e T p- 


R$ Brazilian Real (BRL) 


Construct 2 
Personal License 
Business License 
License Upgrade 
Educational Licenses 





Addons 

Gamedev Tools -Ra 

die Assen What are you looking for? e a! er 
Graphics al a 
Game Templates EG: 'Icons', 'RPG', 'GUI' etc É 


Game Sounds 


Game Music Total asset & tools sold in the Scirra Store 
Sprite Fonts 


Spriter Animations 
Tilemaps 2D Game Assets Take a look at these Royalty Free Assets for your games 


Figura 1.11: Loja da Scirra 


Outro ponto que vale comentar é que qualquer usuario pode subir 
conteúdo (jogos ou trabalhos artísticos) para a loja da Scirra. Desta 
forma, é possível distribuir o seu trabalho para toda a comunidade 
do Construct 2. A loja possui uma série de vantagens, como: 


e Visibilidade mundial para toda a comunidade do Construct 2; 


e Suporte para várias moedas (real, dólar, euro etc.); 

Facilidade para subir os produtos e uma boa documentação; 

e Processo simples de venda e recebimento; 

Boas práticas de SEO (Search Engine Optimization), facilitando 
que o seu produto seja encontrado nos mecanismos de busca. 


Para comprar produtos, basta criar uma conta gratuita e assinar os 
termos de contrato da loja. Todo os itens comprados sempre ficarão 
acessíveis por lá, sendo possível baixá-los novamente caso você os 
perca. 


Mas se você quiser vender as suas produções, será necessário 
pagar uma taxa de licenciamento de venda, que hoje custa 
aproximadamente R$ 60,00. Feito isso, todo produto que você 
submeter será avaliado por eles e liberado caso esteja de acordo 
com a descrição enviada. Tenha em mente que, para cada venda, a 
Scirra retém uma taxa de 30% em cima do valor da compra. 


1.6 Onde conseguir ajuda 


O Construct 2 foi desenvolvido pensando nas pessoas que têm 
curiosidade e desejo de construir seus próprios jogos, mas não têm 
uma base de conhecimento tecnológico para isso — o que é exigido 
em outras plataformas famosas, como o Unity e o Unreal. A 
princípio, realmente não é necessário saber nenhuma linguagem de 
programação nem design de games para começar a trabalhar. 
Como veremos ao decorrer do livro, com poucos cliques, é possível 
criar seus primeiros jogos. 


Entretanto, vale apontar que, com a evolução natural dos projetos, 
mais conhecimentos tornam-se necessários para construir um jogo 
cada vez melhor, tanto visualmente quanto tecnicamente 
(Otimização de recursos e esforço computacional). Mas isso faz 
parte da evolução natural. Independente do nível de afinidade com a 


ferramenta, há uma verdadeira infinidade de sites e fóruns na 
internet que contêm tutoriais e manuais da ferramenta e podem ser 
consultados gratuitamente. 


Vejamos a seguir os principais canais oficiais: 


e Scirra Tutorials (https://www.scirra.com/tutorials/top) — Este é o 
espaço oficial de tutoriais da Scirra. Todos os usuários 
cadastrados podem criar e explorar os tutoriais disponíveis. A 
maioria deles acompanha o código-fonte e está dividida por 
dificuldade, assunto e língua. Infelizmente, os artigos em nossa 
língua ainda são poucos por lá, sendo a maior parte em inglês. 
Há tutoriais para diversos tópicos diferentes: publicações, física, 
dicas e truques, performance, som, inteligência artificial, 
gráficos etc. 

e Scirra Forum (https://www.scirra.com/forum/) — Este é o 
espaço reservado para que as pessoas tirem suas dúvidas e 
discutam suas ideias com outros desenvolvedores de jogos ao 
redor do planeta. O fórum é bastante movimentado e os 
participantes são bem receptivos. 


Fora estes dois canais oficiais, há muitos outros brasileiros e 
estrangeiros no YouTube que dão dicas e tiram dúvidas sobre as 
ferramentas. Uma outra possibilidade é participar de grupos do 
Facebook sobre a plataforma e sobre desenvolvimento de jogos em 
geral. Meetups, workshops e grupos de estudos também são uma 
excelente opção. Seguem algumas recomendações: 


e Time to Play (http://timetoplay.com.br/): empresa especializada 
na produção de jogos digitais. Mantém uma série de artigos, 
vídeos, recursos e afins para os seus jogos. 

e Meetup Construct 2 - SP (https://www.meetup.com/pt- 
BR/Construct2-Sao-Paulo/): grupo de meetup para reuniões 
com intuito de discutir ideias sobre a plataforma. 

e Grupo Construct 2 Brasil 
(https://www.facebook.com/groups/Construct2BR/): o maior 


grupo do Facebook sobre Construct 2 do país. Tem uma 
comunidade bastante ativa que está sempre se ajudando. 


1.7 Conclusão 


Esperamos que agora você tenha uma boa noção de todo o 
ecossistema do Construct 2: onde é possível obter a ferramenta, 
suas limitações, como instalá-la em sua máquina, o que é 
necessário para usá-la, onde obter recursos, como vendê-los e 
como conseguir ajuda. 


No próximo capítulo, veremos mais de perto a plataforma e o 
funcionamento de sua interface, páginas e mais detalhes. 


CAPÍTULO 2 
Conhecendo a plataforma 


O primeiro passo para aprender como funciona qualquer programa 
de computador é entender a sua interface e saber onde encontrar as 
ferramentas, o que elas fazem e como configurá-las. Neste capítulo, 
daremos uma visão geral dos principais aspectos funcionais da 
interface do Construct 2 para dar um gostinho do poder da 
ferramenta. 


Assim, poderemos começar a criação do nosso projeto, 
desenvolvido ao decorrer do livro. Prontos? 


2.1 Start page, a tela de início 


Logo após abrir a aplicação, a primeira tela em evidência será a 
Start Page . Esta página é dividida em seções que facilitam a 
navegação e o acesso a projetos novos ou que já estão em 
andamento. 





Project Recent Projects 
[9 Create naw Project 
ie Geen Propet 


Projet Examples 
Ge Erste al tinahi 
ps | Space Elie 

GM Geen Emater 


Maw Lo Construct 27 Fred Edilisn 


Figura 2.1: Start page 
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Na primeira seção Project , podemos criar ou abrir um novo projeto. 
Logo abaixo, em Project Examples , podemos acessar o código-fonte 
de uma série de pequenos exemplos de projetos pré-construídos 


que vêm com a plataforma. 


O intuito é que a pessoa use estes modelos para aprender como 
funciona a ferramenta e como construir diversos tipos de jogos. Na 
versão que serve de base para este livro, há 92 exemplos. Com 


eles, é possível aprender como: 


e Criar áudios (som de fundo, efeitos sonoros etc.); 


e Trabalhar com diversos tipos de movimentação para o 
personagem; 

e Desenvolver um jogo multiplayer; 

e Criar partículas (como fogo, água, raio); 

e Trabalhar com a física; 

e Criar jogos de plataforma; 

e Utilizar sombras nos personagens; 

e Escutar eventos de toque na tela dentro do jogo; 

e Entre outras coisas. 


Há muitos exemplos bacanas que devem ser explorados e ajudam 
bastante na hora em que surge uma dúvida, ou quando a 
criatividade está em baixa. 


Para criar um novo projeto, clique em New Project Na start Page. 
Escolha a primeira opção de template vazio new empty project, 
conforme mostra a figura: 


Select template or example 


Select a template to start with or an example to open: Fo) 


New empty project 
Create a new empty project with default settings. 


New retro style project 
Create a platform-neutral project with settings and objects suited to retro style 
games (such as pixellated rather than smooth scaling). 


New empty SD landscape 4:3 project 
Create a new empty project with a standard definition 4:3 landscape screen. 


New empty SD portrait 4:3 project 
Create a new empty project with a standard definition 4:3 portrait screen. 


New empty SD landscape 16:9 project 
Create a new empty project with a standard definition 16:9 landscape screen. 


New empty SD portrait 16:9 project 
Create a new empty project with a standard definition 16:9 portrait screen. 


New empty HD landscape 720p project 
Create a new empty project with a high definition 720p (16:9) landscape screen. 

















Figura 2.2: Criando um projeto 


2.2 Conhecendo a interface 


Com o projeto criado, você verá uma página semelhante com a 
figura: 
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Figura 2.3: Interface 


O CONSTRUCT ESTÁ EM CONSTANTE EVOLUÇÃO 


É importante mencionar que, quando você abrir o Construct 2, é 
possível que a interface esteja um pouco diferente do que a 
mostrada neste livro. Uma das barras pode não estar no mesmo 
lugar ou sequer nem aparecer. Isso acontece porque elas são 


móveis e podem ser posicionadas do jeito que o usuário desejar. 
Além disso, a plataforma contém constantes atualizações, e uma 
delas pode acabar alterando o seu visual. Mas é sempre 


possível voltar às opções padrão em File > Preferences > Reset 
dialogs. 


Ao lado direito, podemos ver que foram criadas algumas pastas 
automaticamente: 


ra 





Projects n EI 
v Em Layouts 
| Layout 1 
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Figura 2.4: Aba Projects 


Uma das páginas criadas fica na pasta Layouts e é chamada de 
Layout 1. O layout é uma peça fundamental do funcionamento da 
plataforma. É nele onde serão inseridos os sons, as imagens e 
todos os demais objetos do jogo, ou seja, é onde a nossa fase será 
criada. Todos os jogos necessariamente possuem ao menos um 
layout. 


A outra página também é outra peça fundamental e é criada na 
pasta Events, com O nome Event sheet 1. E nas paginas do tipo 
Event Sheet que fica toda a programação de eventos do jogo. A 


Layout 1 é associada à Event sheet 1 automaticamente, no entanto, 
com a criação de outras páginas, é possível desfazer essa 
associação através da Barra de Propriedades . 


O retângulo com linhas pontilhadas no Layout 1 delimita até onde o 
jogador poderá enxergar. É a área visível que aparece na tela do 
jogo, chamada de Window. Porém, é importante salientar que um 
layout não precisa ser necessariamente do mesmo tamanho 
definido na Window, já que, dependendo do jogo — como os jogos 
de plataforma —, a fase sempre sera maior do que o jogador 
consegue ver na tela. 


Para o nosso exemplo, vamos definir um tamanho pequeno no 
Layout Size € NO Window Size para 640 por 480 (pixels), no menu de 
propriedades ( Properties ) ao lado esquerdo da interface. Como o 
próprio nome sugere, essa aba mostra as propriedades do objeto 
que estiver selecionado. Entretanto, se nada estiver selecionado, ela 
mostrará só as propriedades do layout, onde será possível nomear, 
modificar o tamanho, entre outras coisas. 


Se você selecionar a pasta raiz do seu projeto no menu lateral, 
serão exibidas propriedades sobre o seu projeto, como: nome, 
versão, descrição, autor etc. Você vai perceber que, com esse 
tamanho, as linhas pontilhadas do Layout 1 vão sumir, portanto, o 
jogador enxergará o layout inteiro do jogo. 


Dentro do retângulo pontilhado, vamos adicionar um objeto que será 
a base para criação do nosso personagem de plataforma. Para isso, 
clique com o botão direito do mouse e selecione a opção Insert New 
Object (Inserir novo objeto). Isso abrirá uma janela com os plugins 
internos do Construct 2, conforme mostra a figura: 


Insert New Object 


Double-click a plugin to create a new object type from: 
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Figura 2.5: Inserindo objetos 


Vamos escolher o plugin de sprite, que consiste em uma simples 

imagem que pode ser animada e usada nos elementos visuais de 

um jogo. Vamos nomeá-la de Jogador . Feito isso, coloque-a dentro 
do Layout 1. 


Com isso, o editor de imagens do Construct 2 abrirá. Escolha a 
ferramenta de pintura Fill e uma cor para pintar a sprite . Escolha 
também a ferramenta Resize para ajustar o seu tamanho para 32 
por 68 pixels, para simbolizar um personagem de plataforma, 
conforme exemplificado: 


> Edit image: Jogador (Default, frame 0) x 
DeABG@P?@s LDA eFDVEC AZ QQQ\ a 
i} Tolerance|4 < ž ($ 


HINO NNNO 


100% Mouse: -120, -138 32x 68 PNG-32 


Figura 2.6: Editor de imagens 


Para dar "vida" ao personagem, vamos adicionar uma Behavior 
(comportamento). AS Behaviors são uma das funcionalidades mais 
legais do Construct 2, pois nos permitem adicionar comportamentos 
especificos para os nossos objetos. Existem varios tipos de 
comportamentos disponíveis, desde carros, plataformas, sólidos, 
física etc. 


AS Behaviors Nos ajudam a dar forma aos nossos personagens, sem 
a necessidade de codificar nada. Vamos utilizá-las bastante na 
construção do nosso projeto. 


Para adicionar uma Behavior , clique sobre o objeto que acabamos 
de inserir e, ao lado esquerdo nas suas propriedades, escolha a 
opção de Behavior . Na janela que abrir, clique em + (mais) e dê um 


duplo clique para adicionar a Behavior Platform (plataforma), 
conforme mostra a figura adiante. 


+ / D t y 
Name Type 
o 
o o m J Platform Platform 


Figura 2.7: Adicionando uma Behavior 


O comportamento de plataforma faz com que o objeto seja 
movimentado pelas setas do teclado nas quatro direções (cima, 
baixo, direita e esquerda). Em suas propriedades, podemos 
configurar a velocidade, a aceleração, a força do pulo, a ação da 
gravidade, entra outras características. Por ora, não vamos 
modificar nada. 


Antes de testar o personagem, vamos adicionar uma Sprite que vai 
representar o chão por onde ele andará. Para isso, vamos adicionar 
um plugin na aba de inserção de objetos chamado Tiled Background 

— a tradução mais clara para o português seria algo como "Fundo de 


mosaico". Quando o editor de imagens abrir, desenhe algo para ser 
o chão. 


Os objetos de Tiled Backgroud exibem uma imagem em um padrão 
de repetição, ou seja, você pode aumentar o seu tamanho 
infinitamente, porque ela vai se repetindo. Modifique o tamanho de 
forma que represente um chão e fique parecido com a figura: 





Figura 2.8: Adicionando o chão 


Para dar o efeito de chão ao nosso objeto, temos de inserir o 
comportamento de solid (sólido). Desta maneira, a colisão entre o 
nosso personagem e o chão é habilitada, fazendo com que o nosso 
jogador não atravesse o chão, mas, em vez disso, permaneça em 
cima dele. 


Podemos utilizar esse comportamento para criar chão, muros, 
plataformas móveis ou qualquer tipo de objeto intransponível. Da 
mesma forma que adicionamos a Behavior de plataforma ao nosso 
personagem, clique no objeto e adicione a solid. 


Agora que já temos o nosso personagem e o nosso chão, vamos 
testar. 


2.3 Testes 


Agora já podemos testar como nosso jogo está ficando. 
Primeiramente, escolha o navegador que ele será visualizado 
usando as configurações do navegador de visualização ( Preview 
browser ) nas propriedades do projeto ao lado esquerdo da tela: 


Ez 
Version 1.0.0.0 mi 
Description 
ID com.mycompany.myapp 
Author 
Email 
Website http:// 
El Project settings 
First layout (default) 
Use loader layout No 
Pixel rounding Off 
Preview effects Ves =| 
Window Size 854, 480 | 






El Configuration Settings 
Preview browser (default) 


Fullscreen in browser (default) 








Fullscreen scaling 
Use high-DPI display 
Orientations 

Enable WebGL 
Sampling 
Downscaling 


Figura 2.9: Escolhendo o navegador 


Depois de escolher o navegador de sua preferência, vá até a barra 
superior na aba Home, conforme mostra a figura, e escolha a opção 
de Run layout . 


[pes = em Home View Events 
j ~ U ‘ bi @ Scirra.com QJ Q X& [3 “i 
= ~ i: Select All HTML 5 >  g& Forums ws v 
FRA OA eee | Scirra Run Debug Export Start 


O Hsp Store layout layout project Page 


Undo Selection Configurations 


Figura 2.10: Aba Home 


Por padrão, o Construct 2 vai subir um servidor local no seu 
computador, na porta 5000, com o seu jogo. Então, o navegador 
abrirá o layout do seu projeto, conforme mostra a figura a seguir. 
Use as setas do teclado para movimentar o jogador; você vai 
perceber que ele já contém os movimentos básicos sem nenhuma 
programação! Impressionante, não? 


@) New project (Construct x 


CŒ | O localhost 





Figura 2.11: Testando o seu jogo 


O projeto inteiro é recarregado toda vez que você aperta O Run 
layout . Mas é possível habilitar a visualização contínua, assim ainda 
é possível jogar durante a visualização no navegador, e podemos 


ver a projeção de níveis e pensar em como interagir com eles. Ela 
mantém o estado atual do seu jogo e só modifica o que foi alterado 
na programação em vez de carregar tudo de novo. 


Para isso, basta pressionar o shift quando clicar em Run layout . 
Você notará que a URL aberta no navegador estará acompanhada 


COM ? continuous . 


Esperamos que você tenha aprendido o básico de como criar um 
novo projeto, o que são os layouts, como inserir objetos neles, 
alterar suas propriedades, adicionar Behaviors e testar o jogo. 
Vamos explorar com mais detalhes cada um destes tópicos ao 
decorrer do livro. No próximo capítulo, daremos início ao nosso 
projeto. 


CAPÍTULO 3 
Estrutura inicial 


Agora que temos uma noção básica do funcionamento do Construct 
2, estamos prontos para seguir em frente. Neste capítulo, vamos 
começar a criação do nosso jogo de plataforma que se estenderá 
até o final das explicações. 


Vamos ensinar como criar os elementos para que o jogo funcione 
perfeitamente, mas lhe daremos liberdade para acrescentar/ 
remover objetos e deixar as fases do jogo com a sua cara. 
Recomendamos que você já baixe no seu computador a pasta de 
recursos que foi apresentada na introdução, em 
https://github.com/timetoplaybr/candy-world. Ela contém grande 
parte dos elementos visuais que vamos usar ao decorrer do 
desenvolvimento. 


3.1 Criando e salvando o projeto 


Primeiramente, vamos criar um novo projeto com um template vazio, 
como fizemos no capítulo anterior. Crie o projeto e salve-o clicando 
no menu File > Save As Single File... . Como é a primeira vez que 
salvamos o jogo, o sistema vai pedir para você nomear o projeto e 
selecionar a pasta onde ele será salvo. 


Selecione a pasta de sua preferência e salve o jogo com o nome 
Candy World . O jogo será gravado no formato *.capx , que significa 
Construct 2 compressed project. Este formato é proprietário da 
plataforma e compacta todos os nossos recursos neste único 
arquivo. 


Caso você queira manter a estrutura de pastas do seu projeto, é 
possível salvá-lo no menu File > Save As Project... . O Construct 2 


então salvará todas as pastas separadamente. Em qualquer um dos 
casos, uma vez salvo, basta irem File > save para gravar as novas 
alterações. 


Para manter a integridade e a segurança do seu projeto, o Construct 
2 contém configurações padrões de autosave (salvamento 
automático) e Backup (cópia de segurança). Ambas podem ser 
encontradas e modificadas no menu File > Preferences . 


Por padrão, é mantido pelo menos um arquivo de backup, e o jogo é 
gravado automaticamente a cada 20 minutos. A nossa 
recomendação é que você configure para que seu backup seja 
armazenado em algum lugar na internet, como no Dropbox, por 
exemplo. Desta maneira, evitamos perder tudo caso o computador 
dê algum problema. 


Agora que temos nosso projeto criado e salvo, vamos às suas 
configurações iniciais. No menu de propriedades, preencha as 
informações do menu about (sobre). Neste espaço, devem conter 
todas as informações sobre o seu jogo, como seu nome, versão, 
descrição, autor, ID, e-mail e website. Altere o nome para candy 
World e coloque o restante dos seus dados. 


Properties mx 
-= El 
El About 
Name New project 
Version 1.0.0.0 
Description 
ID commycompany. myapp 
Author 
Email 
Website https 


Figura 3.1: Propriedades do projeto 


O QUE É O ID DE UM JOGO? 


Todo jogo deve conter um identificador único. Normalmente, ele 


tem o formato com.<nome da empresa>.<nome do aplicativo>. No caso 
de aplicativos brasileiros, costuma-se ter o br antes do com. 





Agora vamos configurar o tamanho da nossa tela de jogo. Usaremos 
um tamanho padrão para que ele funcione bem na maior parte dos 
dispositivos. Defina o tamanho do Layout size para 6000 x 480 
pixels, € a Window size para 640 x 480 pixels. 


Você notará que o layout ficará muito maior que a área pontilhada. 
Isso é porque faremos um jogo de plataforma horizontal, então já 
deixaremos todo o cenário pronto para o nosso personagem 
atravessar. Por fim, nomeie O Layout 1 para Fase1. 


3.2 Adicionando camadas 


Ao lado direito da interface, está a Barra de layers (Barra de 
camadas). As camadas têm uma função importantíssima nos jogos: 
permitem mostrar diferentes grupos de objetos na frente ou atrás 
dos outros, dando o efeito de profundidade ao nosso jogo, mesmo 
que ele seja em duas dimensões. 


Além disso, elas são essenciais para que possamos trabalhar com 
interfaces não rolantes (HUDs ou Uls) — em outras palavras, objetos 
que sempre ficarão no mesmo lugar da tela do jogo, independente 
da ação do jogador. Este tipo de interface é essencial para colocar 
informações na tela, como: barra de vida, número de vidas 
restantes, pontuação, tempo etc. 


As camadas sempre pertencem a um layout, podendo ser 
adicionadas, editadas e excluídas na Barra de layers . Para a nossa 
Fase1 , vamos adicionar apenas quatro camadas. Para isso, clique 
no botão + para adicionar uma layer, e altere seu nome na Barra de 
propriedades OU pressionando a tecla F2. Crie as camadas com os 
nomes: UI, Jogador, Principal e Fundo. 


Layers nx] 


Loft 4 
UI 

Jogador 

Principal 

= Fundo 


Figura 3.2: Barra de layers 


Usaremos estas quatro camadas para organizar os nossos objetos 
dentro do jogo: 


e Fundo: aqui colocaremos todos os objetos referentes ao 
cenário onde o jogo vai se passar — basicamente o plano de 
fundo e as suas decorações. 

e Principal: como o nome já indica, será a principal camada no 
nosso layout. Aqui colocaremos a maior parte dos objetos que 
vão interagir com o nosso personagem, desde plataformas, 
portas, colecionáveis até os inimigos. 

e Jogador: essa camada será dedicada ao nosso personagem e 
seus inimigos. 

e UI: esta é a sigla para User Interface, que significa interface de 
usuário. Nesta camada, vamos colocar todos os objetos 
informativos sobre o jogo, como a pontuação e a quantidade de 
vidas. Também vamos utilizá-la para colocar a tela de pause e a 
de fim de jogo. 


Repare que, ao criar as camadas, todas aparecem com as suas 
respectivas caixas marcadas, com o cadeado aberto e 
acompanhadas de um número. Os números indicam a profundidade 
da camada, de modo que, quanto maior o número, mais à frente ela 
estará das demais. Por isso que colocamos a camada Fundo com 

o, para ela ficar atrás de todas, e a ur com 3 para ficar à frente. 


Os cadeados servem para "bloquear" uma camada. Quando 
bloqueada, ela não pode ser alterada. Isso nos ajuda na hora de 
trabalhar com múltiplas camadas, para evitar mexer em objetos de 
outra por acidente. Esta é uma técnica bem familiar em programas 
que costumam trabalhar com elementos gráficos, como o Illustrator 
e o Photoshop. 


Por fim, a caixinha que acompanha os nomes indica se uma 
camada é visível ou não. Alternar a visibilidade dela nos ajuda a 
trabalhar com múltiplos objetos no layout. Isso nos permite focar 
somente na camada que estamos trabalhando no momento. 


Ao selecionar uma layer, você notará que ela tem algumas 
propriedades: 


Properties no EI 


= 

= Layer properties 
Name UI 
Initial visibility Visible 
Background color | | 255, 299, 299 
Transparent Yes 
Opacity 100 
Force own texture No 
Use render cells No 
Scale rate 100 

(+) Parallax 0, 0 


Figura 3.3: Alterando o Parallax 


Para o nosso projeto, altere a propriedade Transparent 
(transparente) de todas as camadas para o valor yes . Isso fará com 
que elas fiquem sem fundo, tornando possível colocar os objetos 
sobrepostos. 


E para que os objetos da camada ur fiquem fixos e sempre 
acompanhem o jogador durante o percurso da fase, altere a 
propriedade Parallax para ə,ə. Caso contrário, os objetos ficarão 
para trás. 


3.3 Adicionando um plano de fundo 


Chegou a hora de colocar um plano de fundo para a nossa fase. 
Para isso, selecione a layer que chamamos de Fundo e insira um 
objeto de Tiled Background nela. Os objetos deste tipo são ideais 
para planos de fundo, porque são otimizados e carregam 
rapidamente. Por padrão, sempre o usaremos para criar os planos 
de fundo dos nossos jogos. 


Quando o editor de imagens abrir, importe a imagem fundo-fase1 , 
que está dentro da pasta Fundos na nossa pasta de recursos. 
Coloque-a no Layout Fase1 de forma que ocupe todo o tamanho do 
layout, conforme mostra a figura: 





Figura 3.4: Imagem de fundo da fase 1 


Repare em como a imagem de fundo se repete perfeitamente 
durante toda a extensão da fase. 


3.4 Criando o cenário do jogo 


Criada a nossa fase com um plano de fundo, vamos começar a 
montar o seu design. Como o nosso projeto será um jogo de 
plataforma, montaremos nosso cenário usando basicamente quatro 
itens: 


e Chão; 
e Plataformas (estáticas e móveis); 


e Decorações; 
e Barreiras invisíveis. 


Para que consigamos trabalhar com eles, é fundamental antes 
compreender o funcionamento de colisões e pontos de origem e de 
imagem dentro do Construct 2. Vamos conferi-los. 


Origem e pontos de imagem 


Sempre que trabalhamos com uma sprite no editor, podemos 
alterar o seu ponto de origem. Este ponto nada mais é que a origem 
do objeto. Ele é usado para referenciar a posição dentro do layout e 
seu centro de rotação. Será esse ponto de rotação que dirá ao 
Construct 2 como o seu objeto vai agir quando ele for rotacionado. 


CENTRO DE ROTAÇÃO 


Para entender melhor o que isso significa, pense em como o 
nosso corpo é composto. Temos dois braços que estão 
conectados ao restante do nosso corpo por meio dos nossos 
ombros. Quando você move o seu braço direito, o seu centro de 
rotação é o seu ombro. Quando você move o seu braço 
esquerdo, o seu ombro esquerdo é o centro de rotação. Ou seja, 
o centro de rotação é o ponto fixo do objeto usado como 
referência para rotacioná-lo. 





Essa configuração é feita na ferramenta origin and Image Points 
(origem e pontos de imagem). Ao clicar nesse botão, é aberto o 
diálogo de pontos de imagem, o Image points . Essa janela permite 
definir a origin (origem) da imagem e também os seus pontos 
(pontos arbitrários acessíveis por eventos) em uma imagem: 
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Figura 3.5: Ponto de origem 


O ponto de imagem, diferentemente do ponto de origem, tem a 
função de criar pontos que geram outros objetos. Ou seja, estes são 
usados como ponto de origem de outros objetos, que saem a partir 
dele. 


O exemplo mais fácil de imaginar como isso é usado é pensar em 
um jogo de tiro. Ao mesmo tempo que temos o ponto de origem do 
personagem, também temos um ponto de imagem adicionado à sua 
arma, pois é de lá que são disparados os tiros. Poderíamos ter uma 
Sprite na qual o personagem carrega uma arma e colocaríamos um 
ponto de imagem exatamente onde fica a arma, pois é de lá que 
sairiam as balas. 
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Figura 3.6: Pontos de imagem de uma arma 


Não vamos criar um jogo de tiro neste livro, mas utilizaremos estes 
dois conceitos para criar nossas plataformas e configurar as 
colisões entre elas e o nosso personagem. 


Colisões 


Uma colisão acontece quando a área de colisão de um objeto entra 
em contato com a área de colisão de outro objeto. A área de colisão 
de um objeto pode ser definida no editor de imagem na ferramenta 
Set collision polygon . Podemos definir uma área de colisão de duas 
maneiras: 





Figura 3.7: Área de colisão simples 





Figura 3.8: Área de colisão avançada 


Na primeira imagem, temos uma área de colisão simples com 
somente 4 pontos, que só engloba o retângulo onde está contido o 
objeto. Chamamos este tipo de área de colisor em caixa. É o tipo 
mais comum de colisor usado nos jogos. 


Para criá-lo, clique sobre a imagem com o botão direito do mouse e 
selecione a opção set to bounding box, conforme mostra o exemplo: 
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Figura 3.9: Área de colisão 


A segunda imagem mostra uma área de colisão mais avançada, 
pois determina exatamente a forma da figura. Este tipo de colisão, 
por ser mais precisa, consome muito mais memória e 
processamento da máquina, e torna os personagens mais sensíveis 
a colisões. 


É por isso que, em muitos jogos tridimensionais, não é difícil 
presenciar objetos que passam um pelo outro. Para o nosso jogo, 
manteremos as simples, com colisores em forma de caixa. 


ÁREAS DE COLIS ES AVANÇADAS 


Podemos definir uma área de colisão que contorne exatamente 
o nosso personagem, com o objetivo de deixar as colisões do 
objeto mais precisas. Para isso, basta adicionar pontos de 
colisões na imagem. 


O Construct 2 não limita o número de pontos que podemos 
colocar, mas recomenda que sejam menos de oito. Para 
adicionar um novo ponto, basta clicar duas vezes com o botão 
esquerdo em cima de um dos pontos já existentes, e depois é só 
moldá-los como desejar. 





Vale lembrar que os pontos de imagem e de origem, assim como as 
colisões, são aplicáveis somente para objetos do tipo sprite. 


3.5 Chão 


Agora que temos os conhecimentos básicos sobre ponto de origem, 
pontos de imagem e colisões, conseguiremos construir nossos 
objetos. Vamos começar pelo chão. Ele será o objeto que 
representa o caminho onde o jogador pode pisar. 


Selecione a Layer principal @ insira outro objeto de Tiled background . 
Nele vamos importar a imagem da pasta de recursos chão, 
chamada chao-fase1 . Modifique o seu tamanho de forma que 
represente o chao por onde o jogador vai andar e coloque na 
posição que desejar no layout. Veja um exemplo: 








Figura 3.10: Chão da fase 1 


Para que o chão não seja um fantasma que o nosso personagem 
vai atravessar, não se esqueça também de adicionar a Behavior 
Solid (Sólido) nesse objeto, como fizemos no exemplo no capítulo 
anterior. 


3.6 Plataformas 


Para evitar que a nossa fase fique muito linear, vamos adicionar 
algumas plataformas. Elas tornam a vida do jogador mais difícil, e 
deixam o nosso jogo mais dinâmico e divertido. Para o projeto, 
vamos construir dois tipos de plataformas: móveis e estáticas. 


Colocaremos todas na layer chamada Principal. As móveis 
funcionarão como elevadores para o nosso personagem, enquanto 
as estáticas vão servir de apoio para ele alcançar lugares altos ou 
que não tenham chão. 


Vamos começar com uma plataforma móvel. Insira uma nova sprite 
no layout e nomeie-a de PlataformaMovel_fase1 . Importe novamente a 
imagem chao-fase1 da pasta de recursos, colocando o seu ponto de 
origem embaixo no centro (Bottom) e a sua colisão em formato de 
caixa. Para isso, selecione a opção set to bounding box, Como já 
mencionado. 
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Figura 3.11: Área de colisão e ponto de origem da plataforma 


Adicione a Behavior sine (seno). Este comportamento fará com que 
o nosso objeto se mova de acordo com o resultado de algumas 
funções matemáticas. Podemos configurar para que a função atue 
em diversos aspectos do objeto, desde o seu movimento vertical 
e/ou horizontal, até sua angulação e opacidade. 


Para que a nossa plataforma mova-se verticalmente, coloque o valor 
vertical na propriedade movement . Para se mover na horizontal, 
coloque o valor Horizontal na propriedade. Agora, para configurar o 
tempo e alcance da plataforma, vamos usar as propriedades Period 
€ Magnitude. 


O tempo é propriedade que configura a duração do movimento da 
plataforma para chegar de um lado para o outro (ou de cima para 
baixo). O alcance é a distância em pixels que a plataforma chega. 
No nosso jogo, recomendamos os valores a seguir: 


=| Sine 
Active on start Yes 
Movement Vertical 
Wave Sine 
Period 4 
Periodrandom 0 
Period offset 0 
Period offset ra.. O 
Magnitude 100 
Magnitude ran... 0 


Figura 3.12: Sine Behavior 


Por fim, não se esqueça de adicionar novamente o comportamento 
de solid à plataforma; caso contrário, o personagem passará por 
dentro dela. Para as plataformas estáticas, apenas basta o 
comportamento de solid . Adicione uma de cada em seu layout e 
faça o teste. 


3.7 Decorações 


As decorações nada mais são que objetos utilizados com o intuito 
de enfeitar e detalhar o nosso cenário. Use a sua criatividade para 
deixar o cenário com a sua cara. Na nossa pasta de recursos, há 
uma série de imagens que podem ser usadas na temática do jogo. 
Elas estão localizadas na pasta Enfeites. 








canePinkSmall cookieChoco creamChoco creamPink creamVanilla 
cupCake gummyWormRe hillCaneChocoTo hillCaneRedTop lollipopBaseBrow 
dHead p n 
waffleChoco wafflePink 


Figura 3.13: Pasta enfeites 


Para adicionar uma decoração, selecione a layer chamada Fundo e 
importe as figuras como sprites . Desta vez, não coloque o 
comportamento de solid, caso contrário, o nosso personagem 
ficará "preso", já que estará colidindo com elas. 


3.8 Barreiras invisíveis 


Os layouts não possuem limitações de espaço por padrão, o que 
significa que qualquer objeto tem a liberdade de atravessar os seus 
limites verticais e horizontais. Para contornar este problema, temos 


de usar paredes invisíveis. Invisíveis porque não queremos que ela 
seja exibida no nosso jogo, mas que apenas delimitem a área de 
ação dos nossos objetos. 


Essa é outra técnica bastante utilizada no mercado, principalmente 
quando se trata de jogos de mundo aberto, como é o caso do Grand 
Theft Auto. A liberdade dada ao jogador é tanta, que é necessário 
criar barreiras invisíveis para que ele não saia dos limites do jogo. 


Felizmente, criar uma barreira é muito simples. Basta criar uma 
Sprite na layer chamada Fundo, com o comportamento solid. Para 
que ela nunca seja visível, coloque na aba de propriedades do 
objeto a propriedade Initial visibility (visibilidade inicial), com o 
valor Invisible (invisível). A figura a seguir mostra essas barreiras 
criadas no layout. 
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Figura 3.14: Criando barreiras invisiveis 


Note que deixamos um pequeno espaço na barreira na parte inferior 
perto do chão. Isso servirá para que os inimigos consigam passar e 
"sair" do layout, e não fiquem parados no começo da fase. Não se 
preocupe com isso agora, vamos entender tudo no capítulo de 
adição de inimigos. 


3.9 Adicionando a base do jogador 


Agora que temos o nosso cenário pronto, vamos finalmente inserir o 
nosso jogador. Para evitar problemas futuros, faremos um pequeno 

truque aqui: em vez de já importar a figura do nosso jogador, vamos 
adicionar uma base retangular para ele. 


Você se lembra de que as colisões podem causar problemas com o 
cenário? Este truque evita exatamente isso. Como vamos colocar 
animações para as ações do nosso personagem (pular, andar, 
morrer), se não utilizarmos uma base em comum, cada animação 
pode ter uma área de colisão diferente e causar problemas no jogo, 
por exemplo, ele ficar travado no cenário. Além disso, 
conseguiremos salvar processamento e memoria, deixando o jogo 
mais eficiente. 


Nas imagens a seguir, é possível notar a diferença de colisões entre 
a animação da base e do personagem que usaremos. 





Figura 3.15: Colisões na animação do jogador 





Figura 3.16: Colisões na base do jogador 


Com a layer chamada Jogador selecionada, crie uma nova sprite 
que será a base do jogador. Crie um retângulo nas dimensões 
32x68 pixels, para que fique semelhante ao da imagem anterior. 
Adicione a Behavior Platform a ele. 


Nas características deste comportamento, mude o valor da 
propriedade Double jump (pulo duplo) para Enabled (habilitado), 
conforme exemplifica a figura seguinte. Isso fará com que o nosso 
personagem ganhe a capacidade de pular duas vezes, alcançando 
lugares mais altos. Ao final, nomeie-o de Jogador . 


= Behaviors 
[=| Platform 
Max speed 330 
Acceleration 1500 
Deceleration 1500 


Jump strength 650 





Gravity 1500 
Max fall speed 1000 
Doublejump Enabled 


Jump sustain 0 
Default controls Yes 
Initial state Enabled 





Figura 3.17: Double jump 


No próximo capítulo, adicionaremos as animações do jogador e, 
finalmente, começaremos a programar o nosso jogo. 


CAPÍTULO 4 
Movimentação e animação do personagem 


Neste capítulo, vamos ver mais detalhes sobre o desenvolvimento 
do nosso jogo de plataforma. Aqui nós daremos vida ao nosso 
personagem por meio de movimentos e animações. Para realizar 
esta missão, veremos: 


e Como funciona o editor de animações do Construct 2; 
Como usar múltiplas imagens para criar animações; 

e O que são eventos e folha de eventos; 

Como utilizar os eventos para interpretar os comandos do 
teclado; 

e Como associar eventos com ações no jogo. 


Ao final deste capítulo, teremos desenvolvido toda a parte de 
movimentação e animação do nosso personagem, e entendido os 
elementos-chave para a criação de qualquer jogo de plataforma. 
Vamos começar? 


4.1 Menus de animação 


Para implementar os movimentos e as animações do nosso 
personagem, primeiros temos de retornar ao editor de imagens e 
entender como funciona os seus menus de animação. Os menus de 
animação são simples; na figura a seguir, destacamos seus 
principais elementos: 
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Figura 4.1: Criando animações 


Cada número representa um dos elementos do menu e tem uma 
função específica. Vamos ver para que serve cada um deles: 


1. Barra de Animação (Animations Bar): é aqui onde definimos 
o nome das nossas animações, e a animação Default já vem 
inserida por padrão. A não ser que modifique ou configure outra 
animação, ela será a usada pelo objeto associado dentro do 
jogo. Para cada animação criada neste menu, as configurações 
que veremos a seguir ficam associadas a ela. Ou seja, na 
prática, teremos propriedades e frames distintos para cada 
animação inserida aqui. Por fim, ao clicar com o botão direito 
sobre a animação, podemos renomeá-la, removê-la, colocá-la 
em pastas ou mesmo ver uma prévia de como ela está ficando. 
Não se preocupe que veremos tudo isso. 


2. Barra de Propriedades (Properties bar): nesta barra, são 
definidas as características das animações. Há quatro 
configurações que podemos alterar: 


o Velocidade (Speed): a velocidade nada mais é que o 
número de quadros (ou frames) exibidos por segundo. 

o Laço (Loop): aqui dizemos se animação deve se repetir ao 
terminar ou não. 

o Número de repetições (Repeat Count): se a animação for 
configurada para se repetir, aqui podemos dizer quantas 
vezes — desde uma, duas até infinitas. 

o Repetir em (Repeat to): aqui indicamos em qual frame a 
animação deve voltar em caso de repetição. Na maior parte 
dos casos, sempre será o primeiro. 

o Ping-Pong: este efeito é para fazer um vai e volta da 
animação. 

3. Barra de quadros de animação (Animation Frames): as 
animações nada mais são do que várias imagens exibidas 
rapidamente, dando a impressão de movimento. É nesta barra 
que vemos todas as imagens, ou melhor dizendo, os quadros 
que as formam. Aqui também podemos mudar, reordenar, 
adicionar ou excluir a origem dos quadros. 


4. Editor de imagem (Edit Image): esta parte já vimos, é onde 
editamos as imagens individualmente, definimos colisões, 
pontos de origem, tamanho etc. 


Este é o básico dos menus de animação. Agora que entendemos 
para que servem, vamos adicionar as animações do nosso 
personagem. 


4.2 Animação do personagem 


Vamos inserir animações para três estados do personagem: parado, 
andando e pulando. Chamaremos estas animações de Parado, 
Andando € Pulando , respectivamente. Com a layer Jogador 
selecionada, adicione um objeto sprite e nomeie-o de 
JogadorAnimacao , COMO mostra a figura. 


Insert New Object 


Double-dick a plugin to create a new object type from: pP 
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Figura 4.2: Adicionando uma nova Sprite 


Em seguida, no editor de imagem, importe a imagem Jogador-parado 
que está dentro da pasta Jogador , na pasta de recursos que 
disponibilizamos. Mude o nome da animação padrão Default para 
Parado (lembrando que Default é o nome dado pelo Construct 2 por 
padrão à animação inicial). Ela terá somente um quadro. 


Animations 


LL! Parado 





Figura 4.3: Animação Parado 


Agora, crie mais uma animação na mesma Barra de Animação, COM O 
nome de andando . 


Animations 


Ci] Parado 





Figura 4.4: Animação Andando 


Para ela, utilizaremos dois quadros e, em cada um, vamos 
movimentar os braços e as pernas do personagem para realmente 
dar a impressão de que ele está andando. As imagens que 
usaremos são as Jogador-andando1 © Jogador-andando2 , Na pasta de 
recursos. 


Temos de importar uma de cada vez. Vá até a barra de quadros de 
animação e clique com o botão direito do mouse na opção add Frame 
(adicionar quadro), exatamente como mostra a figura: 


o Edit image: JogadorAnimacao (Andando, frame 0) x 
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Figura 4.5: Adicionando um novo frame 


Ao importar as imagens, teremos nossa animação: 
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Figura 4.6: Adicionando Frames 


Por fim, vamos acrescentar a terceira animagao, a de pulo. Crie uma 
nova e nomeie-a como Pulando . Assim como fizemos no passo 
anterior, insira nela a imagem jogador-pulando . Sua barra de 
animações deve ficar assim: 


A nl matio ms 
EC] Parado 


Et] Andando 
Ei] Pulando 





Figura 4.7: Barra de animação 


Com as animações estabelecidas, não podemos esquecer de 
configurar corretamente o seu ponto de colisão e de origem. 
Lembram-se deles? Precisamos deixá-las iguais; caso contrário, o 
nosso personagem vai se comportar de maneira diferente a cada 
animação. 


Vamos definir o ponto de origem embaixo no centro (bottom) e uma 
colisão simples (set bounding box), como mostram as duas figuras a 
seguir. 


@ Edit image: JogadorAnimacao (Andando, frame 0) x 
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Figura 4.8: Ponto de origem embaixo no centro 


> Edit image: JogadorAnimacao (Andando, frame 0) x 
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Figura 4.9: Colisao simples 


Nossas animações estão perfeitas! Ficou muito legal, né? Neste 
ponto, fique à vontade para adicionar mais frames e detalhes a elas, 
e deixar o jogo com a sua cara. 


Uma vez terminado, coloque a sprite Jogadoranimacao em um ponto 
fora do layout. Por meio da folha de eventos, faremos com que ela 
sempre assuma a mesma posição do sprite Jogador , que colocamos 
no capítulo anterior. Com isso, o personagem vai ser mover de 
forma fluida e sem problemas de colisão entre as mudanças de 
animação. 


Entretanto, antes de colocar o nosso personagem para correr, 
precisamos adicionar três comportamentos a ele: 


e Pino (Pin): este faz com que um objeto fique preso a outro, na 
mesma posição e ângulo. Precisaremos disso para que a sprite 
JogadorAnimacao Sempre fique na mesma posição da Jogador . 


e Piscar (Flash): como o nome já indica, este comportamento faz 
com que o objeto pisque. Vamos usá-lo para que o nosso 
personagem pisque ao ser atingido por um inimigo do jogo. Isso 
indicará ao jogador que ele foi ferido. 

e Rolagem (Scroll to): este é essencial para praticamente todos 
OS jogos em que o tamanho do layout é sempre maior que o 
tamanho da janela de visibilidade do jogador. Isso porque este 
comportamento configura a câmera do jogo para acompanhar o 
movimento de um objeto. Sem ele, perderíamos o personagem 
de vista toda vez que ele ultrapassasse os limites da tela. Em 
nosso jogo, faremos com que a tela sempre siga o nosso 
personagem. 


Selecione a sprite JogadorAnimacao € insira esses três 
comportamentos nele. Lembre-se de que, para adicionar um 
comportamento, basta clicar no botão add behaviour Na Barra de 
propriedades do objeto. Ao final deste passo, ele deverá estar assim: 
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Figura 4.10: Adicionando as Behaviors do jogador 


Nosso personagem está quase pronto! O que precisamos para 
deixá-lo perfeito é adicionar uma maneira de movimentá-lo. No 
Construct 2, temos vários jeitos de fazer um objeto se movimentar. 
As maneiras que usaremos neste livro são: 


e Mouse; 
e Teclado (Keyboard); 
e Toque (Touch). 


Na folha de eventos, temos como configurar as animações e as 
movimentações de acordo com o que for pressionado pelo jogador, 
seja por meio de uma tecla do teclado, de um clique do mouse ou 
um toque na superfície (para dispositivos como tablets e 
smartphones). Na próxima seção, veremos como fazer isso. 


4.3 O que são eventos e folhas de eventos? 


Como já mencionado, nas folhas de eventos ficam contidas toda a 
"programação" do jogo criado no Construct 2. Utilizamos aspas em 
programação, porque não escrevemos sequer uma linha de código; 
tudo é feito com eventos e blocos lógicos. 


Os eventos são métodos pré-construídos pela plataforma e 
possuem funções bem específicas dentro do jogo. Cada evento é 
constituído por condições e ações, como mostra a figura: 


Margem Condição Ações 


err 








1 HE system On start of layout Jt system Set Pontos to 0 
Jt System Set Vidas to 3 





Bloco de evento 


Figura 4.11: Estrutura dos eventos 


Cada condição dispara um ou mais eventos. Eles nos fornecem as 
ferramentas básicas que precisamos para criar desde jogos simples 
aos mais sofisticados. Alguns exemplos de eventos que usamos no 
dia a dia são: 


e Colisão entre objetos; 

Toque ou clique na tela; 

e Tela pressionada no teclado e/ou joystick; 
e Início/fim do carregamento de um layout; 
e E a lista é longa. 


O Construct 2 executa todas as linhas de eventos que estiverem 
contidas na folha de eventos em cada instante, que ele chama de 
tick. O tick (ou instante) é uma unidade de tempo que executa os 
eventos da folha e, em seguida, redesenha a tela. 


Geralmente, os monitores atualizam o display sessenta vezes por 
segundo e, para que as animações do jogo fiquem as mais suaves 
possíveis, o Construct 2 tenta igualar esta atualização. Isso significa 
que a folha de eventos também é geralmente executada igualmente 
sessenta vezes por segundo, redesenhando a tela a cada instante. 
Além disso, as linhas de eventos são executadas de cima para 
baixo, então, os eventos no topo da folha são feitos primeiro. 


Para cada condição atendida de um evento, o Construct 2 dispara 
um ou mais eventos. As condições validam se os critérios de 
ativação de um evento foram executados. Se forem verdadeiros, as 
ações dos eventos são executadas; caso contrário, não. 


Veja um exemplo na figura anterior. Para a condição on start of 
layout (ao iniciar O layout), as ações das variáveis Pontos € Vidas 
são setadas para zero e três, respectivamente. Bem bacana, né? 


O Construct 2 nos oferece uma grande variedade de objetos para 
utilizar no jogo, e cada um contém sua própria lista de condições e 
ações com que podemos interagir na folha de eventos. Por exemplo, 
se adicionarmos um objeto de áudio, será possível interagirmos com 
as ações de áudio, como tocar, pausar, alterar volume etc. 


Porém, independente de quantos objetos coloquemos em cena, o 
Construct 2 oferece O system object (objeto de sistema). Neste 
objeto especial, tratamos todos os eventos que independem dos 
objetos, por exemplo: laços de repetição, salvar e carregar recursos, 
comparar valores etc.: 
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Figura 4.12: Opções do objeto Sistema 


Não se preocupe que utilizaremos bastante este objeto no nosso 
jogo. Além disso, para fins de organização, existem outros dois 
recursos essenciais na folha de eventos: os grupos e os 
comentários. 


Os grupos são blocos que têm a função principal de organizar os 
eventos. Temos a liberdade de criar estes grupos para colocar 
eventos de um mesmo contexto juntos, melhorando a legibilidade 
das folhas que podem ficar extensas com o desenvolvimento dos 
jogos. 


Basta apenas arrastar os eventos para dentro desses grupos. Eles 
podem ser recolhidos e expandidos usando o botão, e sempre são 
dotados de um nome e uma possível descrição. Neste projeto, 
teremos os eventos separados em cinco grupos distintos: Sistema, 
Jogador, Inimigos, Itens coletáveis e Botões. 


Sistema 
E] funções e variáveis do sistema 


Jogador 


Æ Movimentação e animações do Jogador 


Inimigos 
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Figura 4.13: Grupos 


Já os comentários são como notas de fundo amarelas, ficando 
acima do evento que descrevem, para o usuário lembrar do que se 
trata o evento ou o bloco. Também é bem útil para folhas muito 
extensas. 


Para adicionar um comentário, clique com o botão direito do mouse 
em um evento, ou em um espaço vazio na folha de eventos, e 
escolha a opção add comment (adicionar comentário). Você também 
pode selecionar o evento desejado e clicar no atalho de teclado q. 
A figura a seguir mostra dois eventos com uma linha de comentário 
acima. 


Movimentação do jogador 


“EE Keyboard On Right arrow pressed = JogadorAnimacao Set Not mirrored 


“>— Keyboard On Left arrow pressed = JogadorAnimacao Set Mirrored 


Figura 4.14: Comentarios 


Agora que já temos uma melhor noção de como funcionam a folha 
de eventos e os eventos em si, vamos começar a programá-los para 
movimentar o personagem. 


4.4 Movimentação do personagem por eventos 


Já preparamos todo o terreno para que o nosso personagem se 
movimente, falta somente adicionarmos a cereja em cima do bolo. 
Abra a página Event sheet 1 que está dentro da pasta Event sheets. 
Nessa folha, vamos adicionar um novo evento clicando em add 
event , Na parte superior da tela: 
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Figura 4.15: Add event 


Na janela que abrir, vamos ver todos os objetos que inserimos até 
agora no nosso jogo. Além deles, também veremos O system object , 
o objeto que citamos que está sempre disponível, independente da 
quantidade de objetos do seu layout. 
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Figura 4.16: Objetos importados 


Muito bem. Neste evento que acabamos de criar, configuraremos os 
movimentos de animação do nosso personagem para que 
correspondam às setas do teclado, desta maneira: 


e Tecla para cima (?): animação de pulo; 

e Tecla para direita (?): animação de movimentação para a 
direita; 

e Tecla para esquerda (?): animação de movimentação para a 
esquerda. 


Para começar, dê um duplo clique no objeto keyboard (teclado) que 
importamos no projeto e clique em next . Em seguida, surgirão todas 


as condições associadas ao objeto de teclado. Vamos escolher a 
opção on key pressed (tecla pressionada). Esta opção checa se 
alguma tecla foi pressionada pelo usuário: 
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Figura 4.17: Condições do objeto Keyboard 


Agora vamos escolher qual tecla devera ser pressionada para a 
condigao ser valida. Para isso, na proxima aba Parameters for 
keyboard: On key pressed (parametros para o teclado: tecla 
pressionada), clique em click to choose (clique para escolher). Na 
aba Choose a key (escolha uma tecla), selecione a seta do seu 
teclado para a direita ( Right arrow ), e clique em ox ; isso fará como 


que a condição seja clicar com a seta direita do teclado, como 
mostra a seguir: 


Choose a key. Note that international users and users on different operating 
systems or devices may not have the same keys available, 


Key <dick to choose > 


Cancel Help on expressions Back Done 
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Figura 4.18: Escolhendo a tecla 


Depois, volte para a aba Parameters for keyboard: On key pressed. 
Verifique se a tecla Right arrow foi mesmo selecionada e clique em 


Done : 


Parameters for Keyboard: On key pressed 


Choose a key. Note that international users and users on different operating 
systems or devices may not have the same keys available. 


Key Right arrow 


Cancel Help on expressions Back 


Figura 4.19: Parametros da tecla 


Agora que estamos verificando a condição da tecla direita do 
teclado ser pressionada, vamos adicionar uma ação. Esta sera 
trocar a animação de parado para andando, tomando o cuidado 
para que ele esteja sempre virado para a direção que o jogador 
estiver indo. 


Para fazer isso, usaremos a ação mirror (espelho). Com ela, 
podemos dizer ao Construct 2 para que ele reflita a imagem quando 
necessário. Por isso, vá até a folha de eventos e clique em Add 
action para adicionar uma ação: 


+ E Keyboard On Right arrow 
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Figura 4.20: Adicionando uma ação 


Na janela que abrir, selecione O Jogadoranimacao e escolha a ação 
Set mirrored (setar espelhamento). Na aba aberta, escolha a opção 
Not mirrored (nao espelhado) e clique em Done : 


Parameters for JogadorAnimacao: Set mirrored 


Choose whether to horizontally mirror the object or set it back to normal. 


State Not mirrored ne 


Cancel Help on expressions Back 


Figura 4.21: Adicionando uma ação ao jogador 


Como o nosso boneco já está virado para a direita por padrão, 
colocamos a opção para que ele não reflita nada. Para a tecla da 
esquerda, temos de fazer diferente. Adicione a condição da tecla da 
esquerda assim como fizemos com a da direita, e insira a ação de 
Mirrored . Ela deverá ficar assim: 


1 + Keyboard On Right arrow | Jogado... Set Not mirrored 
pressed 

> > ES Keyboard On Left arrow = Jogado... Set Mirrored 
pressed 


Figura 4.22: Condições e ações das teclas 


Nesses dois eventos, cada vez que a tecla da seta direita for 
pressionada, o jogador virará para a direita (espelhar) e, quando 
clicada a tecla da esquerda, ele vai virar para a esquerda. Bem 
legal, né? Mas ainda falta uma animação, a de pulo. Então, vamos 
lá. 


Clique em Jogador na janela de eventos e, em seguida, escolha a 
condição Is Jumping (está pulando). Para a ação, selecione o 
JogadorAnimacao € escolha a opção set Animation (setar animação). 
Procure pela animação "pulando" que criamos anteriormente e 
clique em Done: 


Parameters for Jogadorânimacao: Set animation 


The name of the animation to set, 


Animation |) pu lando" 


From beginning a 


Cancel Help on expressions Back 


Figura 4.23: Animação "pulando" 


Pronto! O único detalhe que falta é tratarmos a animação para 
quando o personagem estiver completamente parado, ou seja, O 
jogador não está pressionando nada no teclado. Na janela de 
eventos, selecione 0 Jogador e dê a condição on landed (parado). 


Para conseguir fazer a validação de não estar apertando nada, 
vamos ter de usar os subeventos. Eles nada mais são do que os 
eventos que já estamos estudando, com diferença de que estes 
estão associados a um outro evento "pai". Vamos utilizá-los para 
podermos testar mais condições nos nossos eventos. 


Para adicionar um subevento na nossa condição anterior, clique 
com o botão direito do mouse no canto esquerdo da condição. 
Selecione a opção add e, em seguida, add sub-event (ou clique em 
s do seu teclado). Para esse subevento, selecione outra vez o 


objeto Jogador e escolha a condição Is moving (movendo) e, para a 
ação, selecione o objeto Jogadoranimacao e escolha o valor "andando" 
em set Animation. 
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Figura 4.24: Adicionando um sub-event 


Precisamos setar a animação do jogador para "parado" para quando 
ele não estiver se movendo. Para isso, adicionaremos uma condição 
chamada Else (se não) no nosso evento. Ela será sempre ativada 
quando a condição anterior não for respeitada. 


Clique no canto esquerdo do subevento com o botão direito do 
mouse, selecione a opção add e, depois, add Else (ou aperte a tecla 
x ). Na condição Else , selecione o objeto jJogadoranimacao e escolha 
o valor "parado" em set animation . Isso fará com que, quando o 
jogador estiver se movendo, ele tenha a animação; caso contrário, 
fique parado. 


Sua folha de eventos ficará assim: 














1 > Keyboard On Right arrow > JogadorAnimacao Set Not mirrored 
pressed 
2 EE Keyboard On Left arrow pressed = JogadorAnimacao Set Mirrored 
3 i Jogador A Platform is jumping = JogadorAnimacao Set animation to “pulando” (play from beginning) 
46 9 q Jogador JÁ Platform On landed 
5 | Jogador A Platform is moving > JogadorAnimacao Set animation to “andando” (play from 
beginning) 
6 a System Else = JogadorAnimacao Set animation to “parado” (play from beginning) 


Figura 4.25: Folha de eventos 


Agora vamos adicionar mais dois eventos para setar a animação do 
jogador parado ( stopped ) ou se movendo ( moved ), assim 
terminaremos a sua animação. 


Para isso, adicione um novo evento para o objeto Jogador e escolha 
a condição on stopped para ele. Para a ação, selecione o objeto 
JogadorAnimacao € escolha o valor "parado" em set animation. Para o 
ultimo evento, selecione novamente o objeto Jogador e escolha a 
condição on moved . E para a ação, selecione o objeto Jogadoranimacao 
e escolha o valor "andando" em set animation. 


Sua folha de eventos deve estar assim: 


7 |9 i Jogador A Platform On stopped ‘= JogadorAnimacao Set animation to “parado” (play from beginning) 
8» il Jogador A Platform On moved = JogadorAnimacao Set animation to “andando” (play from 
beginning) 


Figura 4.26: Eventos da animação do jogador 


Pronto, temos todos os eventos de movimento e animação do nosso 
personagem programados. Você se lembra de que fariamos a base 
do jogador e suas animações de forma separadas? E que, pela 
folha de eventos, faríamos que elas sempre ocupassem a mesma 
posição, dando a impressão que é um objeto só? 


Chegou a hora de fazer isso para finalmente finalizarmos a 
animação do nosso personagem. Como faremos isso? Usaremos as 
funções set position (setar posição) e pin (fixar). Com elas, 
podemos especificar a posição exata do objeto dentro do plano 
cartesiano, ou seja, utilizando as coordenadas X e Y. 


Para implementar isso, adicione um novo evento na nossa folha. 
Selecione O system object € procure pela condição on start of 
layout (no início do layout). Isso fará com que todas as ações que 
especificarmos sejam executadas assim que o layout for carregado. 
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Figura 4.27: Quando inicializar o layout 


Para a ação dessa condição, vamos selecionar o objeto 
JogadorAnimacao € escolher a opção Set position (Setar posição). 
Assim será possível escolhermos a posição X e Y onde queremos 
posicionar o nosso personagem. 


Como desejamos que a animação comece sempre na mesma 
posição da base do jogador, vamos utilizar como referência as 
coordenadas dele. Adicione os seguintes valores para X e Y, que 
serão a posição do nosso Jogador : 





Parameters for JogadorÂnimacao: Set position 
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Figura 4.28: Adicionando a posição do jogador 


Vamos adicionar mais uma ação nessa condição de on start of 
layout para "colar" o nosso JogadorAnimacao NO Jogador, pelo 
comportamento pin adicionado anteriormente. Isso fará com que a 
animação fique colada à base do jogador, de modo que sempre vai 
acompanhá-lo. Sem isso, ao mover a sua base, o objeto de 
animação ficaria no mesmo lugar. 


Então, escolha novamente Jogadoranimacao na janela Add event , e 
selecione a ação Pin to object, como a seguir: 
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Figura 4.29: Adicionando a ação de Pin 


Na aba que abrir, escolha o objeto Jogador na opção Pin to e clique 
em Done: 


Parameters for JogadorAnimacao (Pin): Pin to object 


Choose the object to pin to. 


Pin to 
Jogador 


Mode Position & angle tt 


Cancel Help on expressions Back 


Figura 4.30: Pin to object 


Esse ultimo evento criado ficara assim: 


nd < System | On start of layout > JogadorAnimacao Set position to (Jogador.X, Jogador.Y) 
> JogadorAnimacao x Pin Pin to i Jogador (Position & angle) 


Figura 4.31: Evento On start of layout 


Ufa, finalmente estamos prontos! Agora que terminamos de 
posicionar O NOSSO Jogadoranimacao no layout, já podemos testar e 
ver como nosso jogo está ficando legal! Para testar, vá até a barra 
superior na aba Home e escolha a opção de Run layout , como já 
explicado no capítulo Conhecendo a plataforma. Clique nas setas do 
teclado para ver o jogador se movendo. 


CAPÍTULO 5 
Sistema de vida e adição de inimigos 


No capitulo anterior, fizemos um ótimo trabalho ao adicionar 
movimentação e animações ao nosso personagem. Passamos por 
conceitos importantíssimos do Construct 2, desde o editor de 
imagem e seus menus para animação (envolvendo o uso de 
quadros por segundos) até os primeiros eventos dentro das folhas 
de eventos. 


Utilizamos os eventos de Keyboard (teclado) para associar as 
animações aos comandos dados pelo jogador. Observamos que os 
eventos possuem basicamente duas partes: as condições e as 
ações. Além disso, também usamos subeventos para conseguir 
descrever condições mais específicas para a animação de cada um 
dos estados do nosso personagem: parado, andando (direita e 
esquerda) e pulando. 


Neste capítulo, vamos ver outro conceito importantíssimo para o 
desenvolvimento de jogos dentro do Construct 2, as variáveis. Para 
mostrar como usá-las, levaremos o nosso jogo para o próximo 
patamar, adicionando um sistema de vida. 


Esse sistema fará com que o nosso jogo termine se o jogador ferir o 
nosso personagem mais de três vezes. A seguir, adicionaremos os 
inimigos e associaremos esse sistema ao comportamento deles. 


Preparados? Então, vamos nessa. 


5.1 Adicionando vidas ao personagem 


Como dissemos no início do capítulo, nossa missão aqui será 
adicionar um sistema de vidas para o nosso personagem, dando a 


possibilidade de o jogador perder o jogo. Faremos com o que ele 
inicie com três vidas, que serão representadas por corações na tela 
(não se preocupe, pois faremos todos os passos juntos). 


A ideia é que cada vez que ele colidir com um inimigo, ou sair da 
área visível do layout, ele perca uma vida. Uma vez que ele perca 
todas as três, a tela de final de jogo aparecerá e este será finalizado 
— "finalizado" aqui significa que o jogador perderá todo o progresso 
e só terá a possibilidade de iniciar o jogo do início. Para fazer tudo 
isso, aprenderemos um conceito muito importante, o de variáveis. 


Quando falamos de computadores, variáveis são espaços na 
memória RAM (Random Access Memory) da máquina física. Essa 
máquina pode ser um computador desktop, um notebook, um tablet 
ou mesmo o seu smartphone. Nesses espaços, podemos 
armazenar qualquer tipo de informação, desde números, palavras 
ou até textos inteiros. 


Todo programa (ou aplicativo) que roda no seu computador utiliza 
dezenas, centenas ou até milhares de variáveis na memória. É por 
isso que, quanto maior ela for, mais coisas você consegue fazer 
simultaneamente. 


Este espaço de memória fica fora do seu disco rígido, pois ela é 
uma memoria de rápido acesso. Quando um programa é carregado, 
o sistema joga-o para dentro desta memória, e o processo usa as 
variáveis lá dentro para controlar o seu fluxo. E com o Construct 2, 
não é diferente. 


Ao abrir um jogo, ele também é jogado para esta memória, e 
podemos utilizar variáveis para controlar o seu fluxo. Dentro do 
Construct, podemos declarar dois tipos de variáveis: locais e 
globais. Cada uma tem contexto e comportamento diferentes. 
Vamos ver com mais detalhes. 


Variáveis locais 


O primeiro tipo de variável que veremos são as locais — também 
chamadas de variáveis de instância. Elas possuem este nome 
porque estão sempre associadas ao objeto que as declararam. Mas 
o que isso significa? 


Quer dizer que podemos ter uma mesma variável em dois objetos 
diferentes, com dois valores diferentes. Usamo-las para guardar 
informações que sejam relevantes para o objeto que as contêm, 
como o número de vidas deste objeto. Será que você entendeu 
aonde queremos chegar? Vamos ver como funcionam as variáveis 
locais na prática. 


Começaremos adicionando uma variável local ao nosso objeto 
Jogadoranimacao . Para isso, selecione-o e vá até as suas 
propriedades (apresentadas na Barra de Propriedades ). Encontre a 
seção Instance variables (variáveis de instância), como mostra a 
figura a seguir. Nesta opção, declaramos as variáveis que 
pertencerão a este objeto. 





Plugin 
UID 
Global 


Pin (no properties) 





Flach frm mremmertiari 


Figura 5.1: Instance variables 


Na coluna add/edit (adicionar/editar), clique no link onde esta 
escrito Instance variables . Uma pequena janela vai se abrir oferendo 
algumas opções. Procure pelo símbolo de soma ( + ) e adicione uma 
variável nova. Na próxima janela, você encontrará quatro campos: 





JogadorÂnimacao: Instance variables 


Name Type Initial value 


New instance variable 4 





m 


Figura 5.2: Adicionando uma variável local 


e Name (nome); 

Type (tipo); 

e Initial value (valor inicial); 
e Description (descrição). 


Como os próprios nomes dos campos já são elucidativos, não fica 
complicado entendermos para que servem. No campo name, 
inserimos o nome que queremos para a variável. Para o nosso caso, 
coloque vida . No segundo campo, o tipo ( Type ), temos três opções 
possíveis: 


e Boolean (booleano): este tipo só assume dois valores, 
verdadeiro (true) ou falso (false). 

e Number (número): tipo específico para variáveis que 
representam números racionais. 

e Text (texto): tipo que guarda palavras, textos ou mesmo um 
caractere. 


Como estamos tratando o número de vidas do nosso personagem, 
escolheremos o tipo Number , que é o que faz mais sentido nessa 
situação. Mas para que você saia deste capítulo com total domínio 
dos tipos de variáveis que podemos criar, vamos explicar 
rapidamente como funcionam os outros. 


O booleano representa apenas dois valores: verdadeiro (true) ou 
falso (false). Esse tipo de variável tem origem lá na física, em que 
tudo é representado desta maneira (verdadeiro é ligado, e falso é 
desligado). Dentro do Construct 2, podemos utilizá-la de muitas 
formas. Um exemplo simples seria para saber se uma alavanca foi 
acionada pelo jogador. Poderíamos criar uma variável chamada 
acessado COM O Valor false por padrão, e somente trocá-la quando 
ela fosse acionada. Desta forma, ficaria fácil saber e usar essa 
informação para outras coisas no jogo. 


Já o tipo texto não tem segredo. Utilizamos este tipo sempre que 
precisamos trabalhar com textos dentro dos nossos jogos. Por 
exemplo, se quisermos exibir o nome do jogador dentro do jogo, 
podemos armazenar essa informação em uma variável do tipo texto 
e usá-la em qualquer lugar do jogo. Bem bacana, né? 


Exploraremos um pouco mais sobre as variáveis e seus tipos no 
decorrer do livro, mas agora é importante que você já sabe para que 
elas servem. Voltando à nossa variável vida, escolha o tipo Number . 


Em seguida, temos o campo Initial value, em que especificamos o 
valor inicial para a variável. Como desejamos que o jogador inicie 
com três vidas, qual número colocaremos neste campo? Isso 
mesmo, o número três. 


Por fim, o último campo é totalmente opcional. Ele serve para 
colocar alguma descrição na variável, para que futuramente você 
(ou seus colegas de trabalho) não esqueça o que ela faz e para que 
serve. 


Particularmente, não usamos muitos este campo, porque sempre 
preferimos criar nomes que sejam elucidativos, ou seja, que 
consigam descrever a sua razão, sem qualquer tipo de comentário 
adicional. Esta é uma prática que herdamos do mundo da 
computação e recomendamos fortemente, mas você está livre para 
trabalhar da maneira que achar melhor, ok? 


Ao final deste processo, sua variável deverá ficar igual à figura: 





Angle 0 JogadorAnimacao: Instance variables E 
Opacity 100 = 
E Position -458, 338 [+e]4 d+ 
+) Size 66, 92 Name Type Initial value 
vida 3 
Add / edit Instance variables | 
=) Behaviors 
Pin (no properties [ 
Flash (no properties 
3 ScrollTo 
Initial state Enabled 
Add / edit Behaviors 


=| Effects 


Figura 5.3: Variável local vida 


Muito bem, agora que criamos esta variável, a usaremos para saber 
quantas vidas o nosso personagem ainda tem. No início do jogo, ela 
será iniciada com três. Se levar dano de um inimigo, subtrairemos 
uma. Se sair da área visível, também subtrairemos uma. Ao final, se 
a contagem da variável for igual a zero, vamos exibir a tela de game 
over e o jogador saberá que perdeu. Bem legal, né? 


Mas antes de partir para o desenvolvimento de toda essa lógica, 
queremos introduzir as variáveis globais. Elas são parecidas com as 


que acabamos de ver, mas não estão "fixas" a um objeto, e sim ao 
contexto da folha de eventos em que foi criada. Ficou curioso? 


Variáveis globais 


Uma variável global — como o próprio nome já diz — engloba todo o 
escopo do jogo. O que isso significa na prática? Significa que todos 
os objetos e eventos podem interagir com ela, como se fossem suas 
próprias donas. Elas são apropriadas para guardar informações que 
sejam de contexto geral do jogo, como estatísticas. No nosso caso, 
vamos usá-la em outro caso recorrente: para guardar a pontuação 
do jogador. 


Neste ponto, você deve estar se perguntando como saber quando 
usar um tipo de variável e quando usar o outro. Queríamos ter uma 
resposta concreta para isso, mas infelizmente não há. Tudo 
depende de como você quer organizar o seu jogo. 


Com base em nossa experiência, utilizamos as globais somente 
para guardar informações que realmente sejam relevantes para o 
jogo como um todo, como pontuações e rankings. Por ora, siga os 
nossos passos e, quando se sentir confortável com a plataforma, 
tente outras maneiras e veja qual melhor se adapta a você. 


Seguindo com o desenvolvimento do nosso jogo, vamos armazenar 
a pontuação do jogador em uma variável global. A pontuação do 
nosso jogo será feita através dos itens coletáveis que vamos inserir 
mais à frente. Por enquanto, vamos apenas deixar o terreno 
preparado. 


Criaremos nossa variável na folha de eventos. Para isso, clique com 
o botão direito do mouse nela e selecione a opção Add global 
variable (Adicionar uma variável global). Uma janela se abrirá com o 
nome de New global variable (Nova variável global), como mostra a 
figura a seguir. 


New global variable bi 


Type | Number no 


(optional) 


sé caes 


Figura 5.4: Adicionando uma variável global 


Você vai reparar que ela é muito semelhante à janela que vimos na 
seção anterior, mas que há algumas diferenças. A primeira delas é 
que agora só podemos criar variáveis de dois tipos: Number e Text. 
A segunda é que, depois do texto de descrição, há duas caixas com 
as opções static (estático) e constant (constante). 


As variáveis que são marcadas como estáticas não reiniciam os 
seus valores quando entram dentro do seu escopo. Seus valores 
são persistidos, tornando-as globais. Não se preocupe muito em 
entender isso agora, discutiremos isso mais à frente quando 
falarmos sobre grupos. Por enquanto, saiba que toda variável global 


é marcada automaticamente como estática. Há alguns segredos 
sobre variáveis que vamos esconder de você, mas só por enquanto. 


A segunda caixa torna as variáveis para somente leitura (read only), 
ou seja, não conseguimos nunca alterar seus valores, somente ler e 
compará-los com outros. Você pode se perguntar: "Mas em que 
contexto vou querer uma variável que não muda de valor?". 


Sabemos que isso parece meio estranho à primeira vista, mas elas 
são bastante úteis, por exemplo, para gravarmos valores que são 
referências para outras tarefas. Poderíamos armazenar o valor da 
força da gravidade nela e fazer com que tudo fosse calculado de 
acordo com isso. Ou poderíamos armazenar o valor de uma 
constante para usar dentro de uma fórmula matemática, como o PI. 


Há vários contextos em que elas seriam úteis. Mas fique tranquilo, 
não usaremos variáveis constantes. Entretanto, tenha em mente a 
sua utilidade. 


Com a janela de criação de variáveis, preencha o campo name com 
o valor pontos, O campo type com a opção Number , e coloque o 
número zero como Initial value . Fique à vontade para adicionar 
uma descrição e deixe as caixas a seguir desmarcadas. Ao final, ela 
deve ficar desta maneira: 


Edit global variable 


to 


Number v 





0 




















Figura 5.5: Variavel global 


Muito bem! Preparamos o sistema de vidas, e iniciamos o sistema 
de pontuação do nosso jogo utilizando as variáveis locais e globais. 
Nosso próximo passo será inserir os inimigos no jogo. 


5.2 Inimigos 


Agora que já temos o nosso personagem com movimentos, 
animações e vidas, vamos começar a dificultar a vida dos nossos 
jogadores colocando inimigos no jogo. Para este projeto, 
planejamos três tipos de inimigos, mas, após concluí-los, fique à 
vontade para deixar sua criatividade fluir e adicionar mais tipos. Por 
ora, Siga OS Nossos passos, ok? 


Então, ao adicionar inimigos, precisamos criar uma inteligência de 
movimentação e configurar cada uma de suas ações em relação ao 
personagem. Queremos que, quando o personagem encoste neles, 
perca uma vida e sinalize que recebeu dano. 


Entretanto, nosso personagem não será totalmente indefeso. 
Também configuraremos que, se ele acertar os inimigos por cima, 
eles morrem. Vamos nessa? 


Inserindo os inimigos 


Para começar o desenvolvimento dos inimigos, adicione uma nova 
Sprite na camada Jogador com o nome de inimigo1 . Agora, para 
ajustarmos sua animação (assim como fizemos com o personagem 
principal), adicione dois quadros para a animação padrão. Ao criar 
os quadros, importe as imagens de nome bolinhai € bolinha2 que 
estão no diretório chamado Inimigos, dentro da pasta de recursos 
do livro. 


Feito isso, nosso inimigo terá uma animação, mas ela está estranha, 
pois a sua velocidade padrão é muito alta para apenas dois 
quadros. Para ajustá-la, vá até a barra de propriedade e altere a 
propriedade speed (velocidade). Mude o seu valor para três. 


Por fim, vamos fazer com que a animação se repita para sempre 
enquanto o inimigo estiver vivo. Para isso, procure pela propriedade 
Loop (repetição) e coloque o valor yes. 


Properties 

24 

=| Animation ‘Default’ properties 
speed 3 
Loop Yes 


Y 
Y 


Repeat count | 

Repeat to 0 

Ping-pong No 
More information Help 


Figura 5.6: Velocidade da animagao 


Agora sim! Para verificar como ela está, clique com o botão direito 
em cima do seu nome (no caso, a Default ), e selecione a opção 
Preview, COMO mostra a figura a seguir: 


Animations 





EL Detal [E 


Add animation 
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Duplicate 
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Delete 


Expand all 
Collapse all 








Help 


Figura 5.7: Selecionando Preview 


Na pequena janela que abrir, veremos como esta a movimentação 
do nosso primeiro inimigo do jogo. 


Pr XxX 





Figura 5.8: Preview da animação 


Bem legal, né? Só não se esqueça de colocar o ponto de origem no 
centro e no meio (bottom) dos dois frames do inimigo1 , como já 
fizemos com a maior parte dos itens que montamos até agora. 


Agora repetiremos basicamente os mesmos passos para adicionar 
os dois outros tipos de inimigos restantes. Adicione uma outra 
Sprite para nosso outro inimigo com o nome de inimigoz. 
Novamente, insira dois quadros e coloque neles as imagens peixe1 
e peixe2 , que também estão na pasta Inimigos . Configure as 
propriedades speed € Loop. Por fim, adicione o ponto de origem no 
centro e no meio dos dois frames. 


Para finalizar, faça o mesmo processo para o terceiro inimigo. 
Chame-o de inimigo? e use as imagens abelhai € abelha2 NOS 
quadros. As configurações das propriedades e o ponto de origem 
também devem ser os mesmos que os demais. 





Figura 5.9: Os três tipos de inimigos 


Muito bem! Colocamos os nossos três inimigos dentro do jogo. Mas 
está faltando alguma coisa, não é mesmo? Nossos inimigos ainda 
não têm vida nenhuma, são objetos estáticos. Na próxima seção, 
iniciaremos a programação de sua inteligência artificial. 


Programando a inteligência dos inimigos 


Já temos todos os inimigos inseridos no layout, agora podemos 
começar a programar sua inteligência. Você deve ter reparado, ao 
adicionar as imagens, que eles estão em posições diferentes. 
Enquanto os dois primeiros estão na horizontal, o terceiro está na 
vertical. Isso é proposital. 


Faremos com que o segundo e o terceiro inimigos (ou seja, a abelha 
e o peixe) se movam na vertical, enquanto a pequena bolinha 
caminhe na horizontal. Ao final do processo, nossa abelha voará, o 
peixe pulará da água e bolinha vai rastejar pelo chão. Para alcançar 
isso, faremos o uso de comportamentos e variáveis. 


Inicie selecionando O inimigo1 , va até a barra de propriedade e 
insira uma variável local — como já aprendemos anteriormente — do 
tipo number . Coloque o nome movendo e o valor zero como padrão. 
Faça o mesmo para O inimigos. Isso sera útil para programar os 
eventos na próxima seção, já voltaremos a eles. 


Agora selecione novamente O inimigo1 e insira o comportamento de 
plataforma. Isso fará com que ele se mova pelo chão. Para o 


inimigo3 , Insira O comportamento de sine . Este move o objeto de 
acordo com o resultado de funções matemáticas, como já 
explicamos anteriormente. Adicione os seguintes parâmetros a 
seguir ao comportamento, para que ele se mova de forma vertical: 


=| Behaviors 
=| Sine 
Active on start Yes 
Movement Vertical 
Wave Sine 
Period 1 


Perod random 10 
Period offset 0 
Period offset ra.. O 
Magnitude 50 
Magnitude ran.. 100 





Figura 5.10: Behavior Sine no inimigo3 


Maravilha, já deixamos a primeira parte da inteligência dos nossos 
inimigos pronta. Agora, vamos desenvolvê-los separadamente. 


Programando o primeiro inimigo 


Vamos adicionar os eventos referentes à movimentação do 
inimigo1 . Para este, queremos que ele se mova no chão na direção 


do jogador (à esquerda) assim que ele se tornar visível na tela. Ou 
seja, antes disso, ele deve esperar quietinho. 


Para ter este comportamento, o primeiro passo é saber se ele está 
dentro da área visível do jogo. Faremos isso entrando na nossa 
folha de eventos e adicionando um novo. Selecione O inimigo € 
escolha a opção compare x (comparar x). Com essa condição, 
conseguimos validar se a posição X do personagem está dentro da 
área visível. 


Escolha esta opção e insira o valor -100 (este valor não é mágico, 
estamos usando-o por causa do tamanho da janela que escolhemos 
para o jogo). Deverá ficar assim: 


Parameters for inimigo: Compare X 


How to compare the X co-ordinate. 


Comparison |> Greater than x 


Cancel Help on expressions Back 


Figura 5.11: Comparando o valor de X 


Colocaremos uma nova condição nesse mesmo evento, que 
verificará se O inimigos está se movendo pela variável local movendo 
já criada. Vamos verificar da seguinte maneira: se a variável movendo 
for igual a um, O jogador estará se movendo; se for igual a zero, 
estará parado. 


Para isso, clique no canto ao lado esquerdo e selecione a opção 
add (adicionar) e, em seguida, add another condition (adicionar nova 


condição). Selecione novamente O inimigoi e escolha a condição 
Compare instance variable (comparar variáveis de instância). Isso fará 
com que possamos comparar o valor de variáveis locais. 


No caso, queremos ver se a variável local movendo é iguala um. 
Para isso, coloque os parâmetros a seguir: 


Parameters for inimigo: Compare instance variable 


Choose the instance variable to compare. 


Instance variable |a movendo “e 


Comparison |= Equal to ne 


Cancel Help on expressions Back Done 


Figura 5.12: Comparando variáveis de instância 


Para a ação desse evento, selecione O inimigo1 novamente e 
escolha a ação simulate Control . Como escolhemos o 
comportamento de plataforma para ele, conseguimos simular o seu 
movimento com essa ação. Como o nosso jogo acontece da 
esquerda para a direita, faremos com o inimigo se mova para a 
esquerda. 


Para isso, na janela que abrir, coloque o valor Left (esquerda) em 
Control (controle): 


Parameters for inimigo (Platform): Simulate control 


The movement control to simulate pressing. 


Cancel Help on expressions Back 


Figura 5.13: Simulate control 


Então, se O inimigo1 estiver se movendo, ele simulará o movimento 
de plataforma para a esquerda. Vamos adicionar outro evento para 
sempre setar a variável local movendo para um Se O inimigo1 estiver 
se movendo, como explicamos anteriormente. 


Para isso, selecione novamente O inimigo1 na janela add event € 
adicione a condição Is on-screen. Para a ação desse evento, 
selecione O inimigoi €, em set value, coloque o valor de sua 
variável local movendo com o valor 1. 


Parameters for inimigo: Set value 


Choose the instance variable to change. 


Instance variable |,» movendo “e 


Cancel Help on expressions Back 


Figura 5.14: Set value 


Pronto, os eventos correspondentes ao nosso inimigo1 já estão 
conluídos. Ao final, sua folha de eventos deve estar assim: 


Movimentação do inimigo1 


d inimigo 1 X > -100 inimigo? Simulate A Platform pressing Left 
inimigo? movendo = 1 
inimigo 1 Is on-screen d inimigo Set movendo to 1 


Figura 5.15: Movimentação do inimigo 1 


Programando o inimigo2 


Vamos partir para O inimigo2 . Para este, usaremos três eventos 
diferentes. 


1. O primeiro será responsável por fazer o inimigo pular a cada X 
segundos; 

2. O segundo vai controlar o quadro de animação para quando ele 
estiver pulando; 

3. O terceiro vai fazer o contrário do segundo. 


Para realizarmos o primeiro evento, selecione o objeto system 
(objeto de sistema) na janela add event . Escolha a condição 
chamada Every x seconds (a cada X segundos). Como o próprio 
nome diz, conseguimos definir ações para que se repitam a cada 
ciclo de X segundos. 


Para o nosso jogo, inicialmente usaremos 1,5 segundos. Para 
configurar este número, coloque-o no parâmetro Interval 
(intervalo), conforme mostra a figura: 


Parameters for System: Every À seconds 


Specify time, in seconds, between running the actions. Interval is limited by the 
framerate (actions will not run more than once per tick). 


aia i 


Cancel Help on expressions Back 


Figura 5.16: Every X seconds 


Na ação deste evento, selecione O inimigo2 e escolha a ação 
Simulate Control . Lembra-se de que usamos esta mesma ação no 
primeiro inimigo? Agora vamos configurá-la de forma diferente. Na 
janela que abrir, coloque o valor Jump (pulo) no campo control . Isso 
fará com que O inimigoz pule. Muito bem, configuramos o primeiro 
evento da nossa lista. 


Para o segundo evento, selecione novamente O inimigoz € 
selecione a condição Is jumping (está pulando). Ela verifica se o 
objeto em questão está pulando ou não. Vamos capturar esse pulo 
do inimigo para trocar o seu quadro de animação. Para fazer isso, 
na ação desta condição, selecione novamente O inimigo € vá à 
opção set frame . NO campo Frame number , coloque o valor O. 


Lembre-se de que o zero representa o primeiro quadro da animação 
do personagem. 


Parameters for inimigos: Set frame 


The animation frame number to set (D-based). 


Cancel Help on expressions Back Done 


Figura 5.17: Setando o valor do frame 


Feito isso, temos de partir para o terceiro item da lista, o evento 
contrário ao que acabamos de criar — ou seja, mudar o quadro de 
animação para quando o inimigo não estiver mais pulando. 
Selecione o objeto system e a condição Else para ele. 


A condição Else sempre representa o caminho alternativo de uma 
dada condição. Como fizemos uma condição para quando o inimigo 
pular, conseguimos usar O Else para dizer o que o jogo deve fazer 
quando ele não estiver pulando. 


Na ação selecione O inimigoz, Vá em set frame €, NO campo Frame 
number , Coloque o valor 1. Os eventos da movimentação do inimigoz 
devem estar assim na sua folha de eventos: 


Movimentação do inimigo2 





+ System Every 1.5 seconds Q inimigo2 Simulate A Platform pressing Jump 
RR P == - A o: ae 

inimigo2 A Platform is jumping inimigo2 Set animation frame to 0 
+ System Else © inimigo2 Set animation frame to 1 


Figura 5.18: Movimentação do inimigo 2 


Tudo certo? Perfeito. Vamos ao inimigos. 
Programando o Inimigo3 


Como O inimigo3 ja tem o comportamento de sine inserido, nao 
precisamos adicionar os seus movimentos aqui. Já os configuramos 
nas propriedades do próprio comportamento anteriormente. 


5.3 Jogador versus Inimigos 


Fizemos um excelente trabalho configurando a "inteligência" dos 
inimigos dentro do jogo. Mas você deve ter notado que, até então, 
eles são inofensivos. Por que será? 


Acontece que ainda não configuramos as colisões entre o nosso 
jogador e os seus inimigos. Ou seja, por enquanto, eles são 
indiferentes uns aos outros. Nesta seção, vamos alterar isto. 


Jogador versus Inimigo1 


O inimigol Será o único que o nosso personagem vai conseguir 
"destruir" no jogo. Faremos com que, caso o jogador consiga atingi- 
lo em cima de sua cabeça, ele morrerá. Este comportamento é 
muito comum em jogos de plataformas. Com toda a certeza, vieram 


a sua mente jogos como Mario, Sonic e Crash, em que alguns 
inimigos são atingidos quando pulamos em suas cabeças. 


Escolha o objeto Jogador na janela de adição de eventos ( Add event ) 
e escolha a opção on collision with another object (na colisão com 
outro objeto). Este evento é disparado quando um objeto entra em 
colisão com outro. 


Vamos configurar inicialmente o que acontece quando o nosso 
jogador colide com o inimigo1 . Quando isso acontecer, queremos 
que o nosso personagem perca uma das vidas e pisque por alguns 
segundos, indicando para quem está jogando que ele acabou de 
levar dano. Caso ele acerte a cabeça do inimigo, o jogador sai 
invicto. 


Iniciaremos configurando o evento para quando acertarmos a 
cabeça do inimigo. Para isso, na janela que abrir, no campo object, 
clique sobre <click to choose> , como mostra a figura: 


Select the object to test for a collision with. 
Object <dick to choose > 


Cancel Help on expressions Back 


Figura 5.19: On collision with another object 


Escolha o nosso inimigo1 , como vemos a seguir: 


Parameters for Jogador: On collision with another object 


Select the object to test for a collision with. 


Object 





inimigo À 


Cancel Help on expressions Back 


Figura 5.20: Escolhendo o objeto da colisão 


Agora, vamos colocar dois subeventos nesse evento para quando o 
valor do Y do Jogador for menor que o valor Y do inimigo . Isto é, 
quando o Jogador colidir por cima do inimigo1 , este será destruído; 
caso contrário, se O Jogador estiver piscando ( Is flashing ), ele vai 
perder uma vida e setar o quadro de animação da sprite coracoes . 


Vale lembrar como criamos um subevento: clique com o botão 
direito do mouse no canto esquerdo da condição inserida e 
selecione a opção add . Em seguida, clique em add sub-event . 


Para o primeiro subevento, queremos comparar se o valor da 
coordenada Y do Jogador é menor que a coordenada Y do inimigo1 . 
Para isso, selecione o objeto Jogador e a condição compare Y. 
Adicione os seguintes parâmetros para fazer a verificação do valor 
de Y: 


Parameters for Jogador: Compare Y 


How to compare the Y co-ordinate. 


Comparison | Less than ~ 


Y co-ordinate |inimj go1Y 





Cancel Help on expressions Back 


Figura 5.21: Comparando o valor de Y 


Ótimo. Agora, para que a animação do personagem não fique 
estranha ao pular na cabeça do adversário, faremos com que ele dê 
um leve pulo para cima ao atingir o alvo. Conseguimos fazer isso 
usando a ação set vector Y . Ela é responsável por configurar a 
posição do objeto no eixo Y. 


Vamos escolher o objeto Jogador e a ação set vector y . Então, 
coloque o valor -700 no campo vector Y : 


Parameters for Jogador (Platform): Set vector Y 


The new vertical movement vector, in pixels per second. 


Cancel Help on expressions Back Done 


Figura 5.22: Set vector Y 


Talvez você se pergunte por que estamos usando um valor negativo 
no eixo Y, sendo que queremos fazer com que ele pule. Fazemos 
isso porque o ponto de origem do plano cartesiano que define a 
posição dos objetos dentro do jogo está no canto superior esquerdo 
do seu monitor. Logo, para que o jogador vá para cima, temos de 
subir negativamente o eixo Y. 


No nosso caso, configuramos 700 pixels. Se usarmos um valor 
positivo, em vez de subir, ele acabará descendo. Engraçado, né? 
Parece confuso a princípio, mas é só lembrar que o ponto de 
referência está no canto superior esquerdo do seu monitor. 


Falta adicionar mais uma ação nesse evento. Nosso inimigo não 
pode ficar na tela depois de o destruirmos. Para remové-lo, 
usaremos a ação Destroy (destruir). Dentro dela, selecione agora o 
inimigol e dê a ação de Destroy . Isso fará com O que O inimigo1 
seja destruído do jogo. 


Perfeito, configuramos como eliminar o inimigo. Agora falta o 
segundo subevento, no qual configuraremos o que acontece quando 
o personagem toca o inimigo em qualquer outro lugar. Selecione o 
objeto de sistema ( system ) na janela add event . Escolha a condição 


Else €, NO mesmo evento, coloque mais uma condição, como já 
fizemos anteriormente. 


Clique com o botão direito do mouse no canto esquerdo da condição 
inserida. Selecione a opção add e, depois, em add another condition 
(ou clique em c do seu teclado). Selecione O Jogadoranimacao € a 
condição Is flashing . No evento criado, clique com o botão direito 
do mouse em cima do Is flashing e selecione a opção Invert 
(inverter); isso fará com que a ação seja invertida. 


Colisão com o inimigo? Edi 
= E ae E) Add th diti 
= p On collision with “2 inimigo1 z O ATE 


a €) Replace condition 
I ii Ald dec mei €) Replace object 


Toggle disabled 
Toggle bookmark 
Toggle breakpoint 


Cut Shift+Delete 


Ox OBS 


Copy Ctrl+C 
dk System Else Paste 


© JogadorAn... Is flashing 


Ctrl+V 


| 
Lp 


Delete 


Eb. 


Figura 5.23: Is flashing 


Só queremos que o jogador perca uma vida quando ele não estiver 
piscando. Para a ação desse evento, selecione jJogadorAnimacao e dê 
a ação subtract from (subtrair de). Isso fará com que seja subtraído 
um determinado valor — no nosso caso, queremos subtrair 1 da 
variável vida do nosso personagem. Para isso, coloque os 
parâmetros seguintes na janela que abrir: 


Parameters for Jlogadorânimacao: Subtract from 


Choose the instance variable to change. 


Instance variable É vida “e 


Cancel Help on expressions Back 


Figura 5.24: Subtract from 


Na outra ação, selecione novamente O Jogadoranimacao € a ação 
Flash , para fazer a animação do jogador piscar. Não mude os 
parâmetros da janela que vai abrir em seguida, pois queremos 
exatamente esse valor de duração e tempo para o comportamento 
de piscar. Então, clique em Done. 


Parameters for Jogadorânimacao (Flash): Flash 


Duration in seconds the object is visible, 


bi 
— 
Cancel Help on expressions Back 


Figura 5.25: Flash 


Os eventos de colisão do inimigos deverão ficar igual aos da figura 
a seguir: 





© E On collision with inimigos 


A Jogador Y < inimigo 1.Y I Jogador Set A Platform vector Y to - 700 
d inimigo 1 Destroy 
SF system Else > JogadorAnimac.. Subtract 7 from vida 
= JogadorAnimacao X Is flashing > JogadorAnimac... g Flash: Flash 0.1 on 0.1 off for 1.0 seconds 


Figura 5.26: Jogador versus Inimigo1 


Agora, se tocarmos no inimigo, perdemos uma vida, e o nosso 
jogador fica piscando por um breve período. Quando ele estiver 
piscando, ele fica invulnerável por um tempo, dando um espaço 
para o jogador se recompor. Depois deste pequeno tempo, ele fica 
vulnerável a danos de novo. 


Para OS próximos inimigos, nosso personagem não será capaz de 
atingi-los. 


Jogador versus Inimigo2 


Para o segundo inimigo, vamos criar somente um evento para, 
quando O Jogador não estiver piscando, perder uma vida ao colidir 
com ele. O processo é muito semelhante ao que já fizemos, então, 
será fácil. 


Para isso, escolha o objeto Jogador na janela de adição de eventos 
( Add event ) e escolha a opção on collision with another object . Na 
janela que abrir, escolha O inimigoz NO campo object : 


Parameters for Jogadorânimacao: On collision with another object 


Select the object to test for a collision with. 


Object | al 
o. inimigo? 
Cancel Help on expressions Back Done 


Figura 5.27: On collision with another object 


Coloque uma segunda condição nesse evento e selecione o 
JogadorAnimacao € a condição Is flashing . No evento criado, clique 
com o botão direito do mouse em cima do Is flashing e selecione a 
opção Invert , portanto, ele só perderá vida se não estiver piscando. 


Na ação desse evento, coloque as mesmas ações que colocamos 
NO inimigo1 para subtrair uma vida e fazer o nosso personagem 
"piscar". Relembre que, para subtrair um ponto de vida, selecione 


JogadorAnimacao , dê a ação Subtract from e escolha um no campo 
value . E para fazer o jogador piscar, selecione O Jogadoranimacao € a 
ação Flash e, então, clique em Done. 


Você terá o seguinte evento para O inimigo2 : 





= = JogadorAnimacao On collision with ® => JogadorAnimacao = Subtract 7 from vida 
inimigo? = JogadorAnimacao g Flash: Flash 0.1 on 0.1 off for 1.0 
= JogadorAnimacao X Is flashing seconds 


Figura 5.28: Jogador versus Inimigo2 
Jogador versus Inimigo3 


Para O inimigos vamos fazer o mesmo evento anterior. A única 
diferença aqui é que colocaremos O inimigo3 NO campo object, Na 
janela on collision with another object , pois agora vamos programar 
as ações dO inimigo 


Seu evento ficará assim: 





“> = JogadorAnimacao On collision with Sw > JogadorAnimacao Subtract 7 from vida 
inimigo3 > JogadorAnimacao g Flash: Flash 0.1 on 0.1 off for 1.0 
= JogadorAnimacao % Is flashing seconds 


Figura 5.29: Jogador versus Inimigo3 


Maravilha. Configuramos todos os comportamentos adequados para 
OS inimigos, desde suas animações, movimentações e até o que 
deve acontecer quando o personagem tocar neles. Fique à vontade 
para alterar os valores que sugerimos e brinque com o que fizemos. 


Nos próximos capítulos, trabalharemos com um sistema de 
pontuação e de fim de jogo, para quando o personagem ficar sem 
vidas. 


CAPÍTULO 6 
Telas de pausa e de fim de jogo 


Uma característica comum em todos os jogos — independente de 
sua categoria, estilo ou plataforma — é que eles possuem uma 
maneira do jogador perder. Se for um jogo de corrida, ele perde se 
não conseguir chegar na primeira colocação. Se for de futebol, ele 
perde se não vencer o campeonato. Se for de luta, se não vencer os 
seus adversários na porrada. 


Mas e em um jogo de plataforma? Podemos nos basear nos 
grandes sucessos do mercado para nos trazer inspirações nos 
nossos jogos. Assim como no Super Mario Bros. — talvez a melhor 
referência que temos quando falamos em jogos de plataforma 2D -, 
fizemos com que o nosso personagem perca vidas ao entrar em 
contato com os inimigos. Entretanto, ainda não programamos o que 
acontece quando o jogador perde todas elas. 


Neste capítulo, criaremos a tela de final de jogo (game over) do 
nosso jogo. Ela aparecerá toda vez que as vidas do jogador se 
esgotarem. E para aproveitar o embalo, também vamos desenvolver 
uma tela de pausa, afinal, não há nada pior do que não poder 
pausar o jogo para um intervalo emergencial, não é mesmo? 


6.1 Tela do final do jogo 


Vamos criar agora a tela de game over, e programar para ela 
aparecer quando o personagem ficar sem vidas. Faremos a tela 
com dois botões: 


1. Jogar novamente 
2. Voltar para a página inicial 


O primeiro botão dará ao jogador a opção de voltar à fase que ele 
estava jogando, ou seja, dar uma nova tentativa para que ele 
consiga superá-la. Para o outro botão, já deixaremos as coisas 
preparadas para implementarmos o sistema de seleção de fases do 
jogo. 


Ele funcionará de forma muito semelhante ao dos jogos da franquia 
Angry Birds. Neste sistema, o jogador só consegue acessar a fase 
atual ou jogar novamente as anteriores. As fases posteriores ficam 
travadas até que ele consiga vencer a atual. 


Mas faremos tudo isso aos poucos. Neste primeiro passo, criaremos 
somente a tela. Esta, na verdade, será uma caixa com as duas 
opções que vai descer no layout quando as vidas forem todas para 
o espaço. Para criá-la, insira um objeto do tipo sprite, no layout 
Fase] Com a layer ur selecionada, e nomeie-o de Tela gameover . 
Importe neste objeto a imagem tela-gameover . Ela está na nossa 
pasta de recursos, dentro do diretório Telas. 


Como faremos a tela deslizar para dentro do jogo quando 
necessário (momento em que o jogador perde todas as vidas), por 
ora, precisamos colocá-la fora do layout. Portanto, coloque a sprite 
tela-gameover fora do layout (assim como fizemos com o objeto 
JogadorAnimacao ), conforme a seguir: 


O e e es. OO {T ċ pa Aa 





Figura 6.1: Tela de game over acima do layout 


Usando a folha de eventos, definiremos sua posição corretamente 
quando for preciso. Para configurar isso, entre nessa folha e crie um 
novo evento. Ao criar, selecione o objeto Jogadoranimacao . Como 
queremos que a tela apareça sempre que o jogador não tenha mais 
vidas, temos de saber quando isso acontece. 


Você se lembra daquela variável de instância, chamada vidas , que 
criamos no capítulo anterior? Ela será essencial agora. Utilizaremos 
um evento de comparação para saber quando ela estiver com o 
valor zero. Para isso, no evento criado, escolha a condição compare 
instance variable (Comparar variável de instância). 


Na janela seguinte, teremos algumas opções. No campo Instance 
variable (Variável de instância), selecione a variável que queremos 


validar — neste caso, a vidas . No segundo campo, temos o 
Comparison (Comparação), no qual vemos vários tipos de 
comparação: 


e = — Equal to (igual a) 
e > — Not Equal to (não é igual a) 
e < — Less than (menor que) 


e = — Less or equal (menor ou igual) 
e \> — Greater than (maior que) 
e = — Greater or equal (maior ou igual) 


Ao ler isso, você provavelmente deve ter se lembrado das suas 
aulas de matemática, aquelas que ensinavam as funções 
geométricas com comparações de valores, não é mesmo? A lógica 
aqui é a mesma. 


Podemos utilizar essas comparações para fazer inúmeros tipos de 
lógicas em nossos jogos. Para este caso, queremos somente saber 
quando o valor é zero, então escolha a opção Equal to. O último 
campo, chamado de value (valor), é onde colocamos o valor que 
desejamos comparar. Insira o valor e (Zero). 


Ao final, sua janela deve estar preenchida assim: 


Parameters for JogadorAnimacao: Compare instance variable 


Choose the instance variable to compare. 


Instance variable | vida “e 


Comparison | = Equal to ww 


Cancel Help on expressions Back 


Figura 6.2: Compare instance variable 


Agora que sabemos quando o jogador zera suas vidas, temos de 
associar as ações que queremos. Colocaremos três ações para 
esse evento. 


Na primeira ação, vamos definir a posição que a tela de final de jogo 
vai aparecer no layout. Na segunda, removeremos o nosso 
personagem do jogo para ele não continuar se movendo depois dele 
ter sido finalizado. E na terceira e última ação, vamos congelar o 
restante do cenário. 


Agora que já sabemos quais serão as funções de cada uma das 
ações que serão inseridas, vamos começar a programá-las. Para a 
primeira, selecione o objeto telaGameover e escolha a condição set 
position (setar posição). Lembre-se de que usamos essa função 
sempre que queremos definir a posição de um objeto no layout com 
suas coordenadas cartesianas. Coloque 320 para o X, e 240 para o 
Y (esta posição corresponde ao meio da nossa janela). 


Parameters for Tela gameover: Set position 


New X co-ordinate, in pixels, 


Cancel Help on expressions Back 


Figura 6.3: Set position 


Para a segunda ação, selecione o objeto Jogador e simplesmente 
escolha a ação Destroy . Assim como fizemos com os inimigos no 
capítulo anterior, essa função removerá o objeto do layout. 


Para a terceira e última ação necessária, selecione o objeto de 
sistema ( system ) e a ação set time scale (setar escala de tempo). 
Com essa função, conseguimos alterar a escala de tempo do jogo 
no Construct 2. Em outras palavras, é possível alterar a velocidade 
com que o processamento das coisas ocorre dentro do cenário. 


Por padrão, tudo no Construct 2 acontece na escala 1 (um). Se 
aumentamos a escala para 2 (dois), a velocidade dobra. Nesta 
mesma lógica, se reduzirmos para zero... Acontece isso mesmo o 
que você pensou, tudo fica "congelado". Coloque o valor e no 
campo Time scale, como a seguir: 


The new time scale: 1.0 = normal speed, 0.5 = half speed, 2.0 = double speed, O = 
pause, etc, 


Cancel Help on expressions Back Done 


Figura 6.4: Set time scale 


Ao final, o evento deve estar configurado desta forma: 


> JogadorAnimacao vida = 0 [== Tela gameover Set position to (320, 240) 
E Jogador Destroy 
Ea System Set time scale to O 


Figura 6.5: Evento da tela de game over 


Muito bem! Configuramos a primeira parte da nossa tela de final de 
jogo. Repare que ainda não trabalhamos nos botões que farão o 
jogador voltar ao mapa ou à seleção de fases. Faremos isso muito 
em breve, no capítulo Trabalhando com botões. Lá explicaremos 
todos os conceitos necessários para que você consiga utilizar 
quantos botões quiser dentro do jogo. 


Feito isso, retomaremos esta tela e faremos o restante de sua 
lógica. Por ora, vamos aproveitar o conceito de escala de tempo que 
aprendemos nesta seção e adicionar uma tela de pause no jogo. 


6.2 Criando a tela para pausar 


Antes de avançarmos com o desenvolvimento, vamos parar um 
instante para aproveitar o trem andando e adicionar uma 
funcionalidade que, apesar de não ser obrigatória para o 
funcionamento, tornará o jogo mais completo e agradável. Estamos 
falando na funcionalidade de pausa. 


Quem nunca teve de pausar o jogo para atender um telefonema, 
responder uma mensagem ou ir beber algo? É importante que os 
jogos tenham esta funcionalidade (a não ser que este seja de 
multijogadores online, neste caso não faz sentido). Para fazer isso, 
vamos aproveitar um dos tópicos que acabamos de aprender: 
escala de tempo. 


Como dissemos, a escala de tempo corresponde à velocidade com 
que o jogo acontece. Por padrão, ela começa em 1. Se dobramos 
este valor, por exemplo, tudo acontece duas vezes mais rápido. Da 
mesma maneira, se alteramos este valor para meio, tudo leva o 
dobro do tempo para acontecer. Logo, para fazer tudo congelar, 
usaremos o valor zero. 


Assim como fizemos com a tela de fim de jogo, adicionaremos uma 
tela de pause que será exibida sempre que o jogo for pausado. Não 
faremos toda a funcionalidade redonda neste momento, mas vamos 
deixar tudo preparado para que, nos próximos tópicos, O 
desenvolvimento se torne mais fácil, ok? 


Comece selecionando a layer ur do nosso layout da Fase1 . Com 
ela selecionada, insira um objeto do tipo sprite e nomeie-o de 

Tela pause . Nele, importe a imagem tela-pause que está no diretório 
Telas da nossa boa e velha pasta de recursos. Coloque essa 

sprite fora do layout, conforme fizemos com a tela de game over. 
Podemos colocar uma ao lado da outra, como a seguir: 


A A O Ad A RB E] ee a "o a 





Figura 6.6: Tela de pausa acima do layout 
Não está faltando algo? 


Neste capítulo, inserimos as telas de fim de jogo e de pausar. 
Aprendemos um pouco sobre o uso das variáveis de instância para 
realizar comparações e criar lógicas dentro da folha de eventos. 
Outro aspecto importantíssimo que assimilamos foi o de escala de 
tempo dentro do jogo. 


Apesar de tudo, ainda não concluímos nossas telas. Em ambas, 
ficaram faltando os seus respectivos botões, certo? Para a de fim de 
jogo, teremos a opção de jogar novamente € Voltar para a tela 
inicial, enquanto na de pausa teremos a opção Regressar ao jogo 

OU Voltar para a tela de seleção de fases. 


Será no layout da fase que incluiremos o botão responsável por 
fazer a tela deslizar para dentro dele e pausar o jogo. Mas não se 
preocupe, retomaremos o desenvolvimento dessas telas quando 
falarmos sobre os botões do Construct 2. 


CAPÍTULO 7 
Inserindo itens coletáveis e pontuação 


Neste capítulo, vamos trabalhar com outro elemento clássico de 
jogos de plataforma: os itens coletáveis. Estes nada mais são que 
objetos que o jogador tem a escolha de coletar ou não. Caso ele 
colete, é recompensado com pontos, vidas, invulnerabilidade ou até 
mesmo fases bônus; caso contrário, nada acontece. É somente uma 
maneira de recompensa-lo pelo seu esforço. 


Os itens coletáveis podem ser qualquer coisa, tudo depende do 
contexto do seu jogo. No famoso jogo do Super Mario Bros., 
lançado pela Nintendo, ele coleta moedas, flores, penas, cogumelos 
e estrelas, por exemplo. Cada um dos itens tem uma vantagem 
diferente. Já no jogo do ouriço Sonic, lançado pela Sega, os itens 
coletáveis são as argolas. 


Cada um usa o universo de seu jogo para criar os seus itens. Para o 
nosso, não será diferente. 


No decorrer deste capítulo, aprenderemos como criar itens 
colecionáveis e associá-los a um sistema de pontuação que será 
exibido na tela. Também faremos um sistema de chave e porta, que 
obrigará o jogador a procurar pela chave para poder vencer a fase. 
Além disso, usaremos nossos novos conhecimentos para conectar 
os pontos que trabalhamos nos capítulos anteriores. 


7.1 Adicionando itens coletáveis 


Nosso sistema de itens colecionáveis funcionará de forma 
extremamente simples. A princípio, criaremos três tipos: 


e Moedas 


e Estrelas 
e Chave/Porta 


As moedas e as estrelas funcionarão como itens de pontuação. A 
cada moeda que o jogador coletar, ganhará uma certa quantidade 
de pontos. As estrelas serão itens mais raros, mas que dão uma 
maior pontuação. 


Por fim, vamos adicionar o sistema interessante de porta e chave. 
Ele também funcionará de forma bem simples: ao final de cada fase, 
colocaremos uma porta. O jogador só conseguirá abri-la e finalizar a 
fase se conseguir encontrar a chave que deixaremos pelo mapa. 


Agora que esclarecemos nossos planos, vamos começar criando 
algumas moedas. 


Inserindo as moedas 


Para inserir as moedas no jogo, adicione uma nova sprite na layer 
Principal € importe a imagem moeda da pasta Itens, que esta 
dentro dos nossos recursos. Espalhe as moedas pela fase como 
desejar, porém, não as coloque acima de 290 pixel no eixo Y, pois 
este é o tamanho máximo que o pulo do jogador vai alcançar. 
Também tenha cuidado para não colocar mais de 30 moedas no 
cenário, pois o tamanho do layout é pequeno e, ao colocar muitas, o 
jogo começará a consumir muitos recursos de máquina, ok? 


Para facilitar o trabalho de colocar várias moedas, podemos copiá- 
las. Para copiar, basta selecionar o objeto, clicar com o botão direito 
do mouse e selecionar a opção copy, como mostra a figura seguinte 
(ou aperte o atalho ctrl + c do seu teclado). 





O a Insert new object 


Edit animations 


Clone object type 

[J Delete 
Z Order k 
Move to layer d 
Align + 


Wrap selection 


Edit event sheet 


X cut Shift-Delete 





Paste Ctrl+V 


| G@ Help 


Figura 7.1: Copiando moedas 


Depois, para colar, basta clicar na tela novamente com o botao 
direito do mouse na posição que desejar colá-lo e selecionar a 
opção paste — ou apertar ctrl + v do teclado. 


Depois de inserir as moedas, precisamos adicionar um novo evento 
para quando o personagem colidir com elas. O primeiro passo é 
fazê-las serem removidas do cenário, para dar a impressão de que 
ela realmente foi coletada pelo jogador. 


Para isso, abra a folha de eventos, crie um novo evento, selecione o 
objeto Jogador € a condição on collision with another object (em 
colisão com outro objeto). No campo object , insira a moeda e, na 
ação, escolha a moeda €e a ação Destroy . 


O evento deve ficar assim: 


Colisão com a moeda 


> E Jogador On collision with moeda moeda Destroy 
g 


Figura 7.2: Colisão com a moeda 


Isso fará com que a moeda desapareça do layout sempre que for 
coletada. Além de dar a impressão de que foi apanhada, ajudará a 
liberar memória da máquina. Feito isso, vamos adicionar algumas 
estrelas. 


Inserindo as estrelas 


A ideia é que as estrelas sejam itens mais raros do que as moedas 
e que ofereçam mais pontos como recompensa. Por isso, vamos 
nos limitar a colocar apenas três delas. 


Para inseri-las, faremos o mesmo processo da inserção das 
moedas. Adicione uma nova sprite na layer Principal e importe a 
imagem estrela, que está dentro dos recursos na pasta Itens. 


Espalhe as três estrelas pela fase como desejar, porém, como já 
mencionamos, tome cuidado para não as colocar acima de 290 pixel 
no eixo Y, já que esse é o valor máximo que o jogador vai alcançar. 
Na folha de eventos, vamos adicionar um parecido com o de colisão 


com as moedas; a única diferença é que agora selecionaremos o 
Sprite estrela, Como mostra a figura: 


Colisão com a estrela 


> i Jogador On collision with dy estrela estrela Destroy 


Figura 7.3: Colisão com a estrela 


Muito bem, agora temos os nossos principais itens coletáveis 
espalhados pelo layout: 





Figura 7.4: Itens espalhados pelo layout 


Até o momento, os itens apenas são destruídos quando entram em 
contato com o jogador. Ainda neste capítulo, vamos adicionar uma 
pontuação para quando o jogador colidir com as moedas ou as 
estrelas. Por ora, continuaremos trabalhando com os itens 
coletáveis, e incluiremos a chave e a porta na fase. 


Construindo o sistema de chave e porta 


O objetivo do sistema de chave e porta é fazer com que o jogador 
explore melhor a fase. Muitos jogos utilizam essa estratégia, mesmo 
que não sejam necessariamente chaves e portas. A lógica por trás é 
bem simples. 


Primeiro, precisamos inserir mais duas sprites na layer Principal: 
uma corresponderá à porta do final da fase, e a outra à chave que 
vai abri-la. Para a porta, vamos adicionar uma sprite com o nome 


porta fasel. 


Para representar os dois estados da porta (aberta e fechada), 
usaremos dois frames de animação — ambos estão na pasta de 
recursos, com o Nome portai-fechada € portal-aberta. Importe as 
imagens, respectivamente, nos quadros 0 e 1. 
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Figura 7.5: Frames da porta 


Como já fizemos com os outros objetos para que não fossem 
animados automaticamente, vá até as propriedades de animação e 
coloque a velocidade ( speed ) para e, e configure a propriedade de 
repetição para No: 


=| Animation ‘Default’ properties 


Speed 0 
Loop No 
Repeat count 1 
Repeat to 0 
Ping-pong No 
More information Help 


Figura 7.6: Animação da porta 


Coloque a porta la no final do seu layout. Agora, para a chave, 
vamos adicionar uma sprite com o nome chave . Vamos importar 
nela a imagem de mesmo nome, contida na pasta Itens no diretório 
de recursos. 


Coloque a chave em algum lugar do layout que o jogador consiga 
alcançar. Feito isso, precisamos programar o evento que associa a 
coleta da chave com a abertura da porta. Começaremos 
adicionando o evento para quando o jogador colidir com a chave. 


Na folha de eventos, adicione uma variável global do tipo number 
com o nome de chave e inicie-a com e. A ideia é que, quando o 
jogador colidir com a chave no jogo, essa variável fique com o valor 
1. Deste modo, sabemos se ele já a coletou ou não. 


Para isso, adicione um evento ao objeto Jogador com a condição on 
collision with another object, então escolha a Sprite chave NO campo 
object . Vamos criar duas ações para esse evento. Na primeira, 
escolheremos a sprite chave € a ação Destroy para ela, pois, 
quando o jogador colidir com a chave, queremos que ela 
desapareça do layout. 


Para a segunda ação, vamos escolher o objeto system e ação set 
value . Na janela que abrir, escolha a variável global chave e dê o 
valor 1, como mostra a figura a seguir. Desejamos que, quando a 
chave for coletada pelo jogador, a variável global chave seja setada 
para 1. 


Parameters for System: Set value 


Choose the variable to change. 


Variable |$ chave sa 


a 


Cancel Help on expressions Back 


Figura 7.7: Set value 


No final, teremos o evento configurado da seguinte maneira: 


| Colisão com a chave 
=? | Jogador On collision with Om chave Owchave Destroy 
cay System Set chave to 7 


Figura 7.8: Evento de colisão com a chave 


Agora que conseguimos saber se o jogador possui a chave ou não 
pela variável global chave, podemos configurar a porta, fazendo-a 
funcionar ou não. Quando o jogador colidir com a porta e a variável 
global chave for iguala 1 (ou seja, já coletou a chave), queremos 
que a porta mude sua animação de fechada para aberta. 


Para isso, adicione um evento ao objeto Jogador com a condição on 
collision with another object , O escolha a Sprite porta_fase1 NO 
campo object . Isso vai identificar o contato do jogador com a porta. 
Agora, adicione mais uma condição a esse evento, escolha o objeto 
System € a condição compare variable para ele. Coloque OS seguintes 
parametros: 


Choose the variable to compare, 
variable 5 chave we 
Comparison |= Equal to a 


Cancel Help on expressions Back Done 


Figura 7.9: Compare variable 


Com isso, verificamos se o jogador pegou a chave ao colidir com a 
porta. Por fim, falta somente trocar o quadro de animação para 
aquele que representa a porta aberta. 


Assim, na ação, escolha a Sprite porta fasel ea ação Set frame, 
para setar a animação. No campo Frame number , coloque o valor 1, 
que é o número do frame que a representa aberta. O evento de 
colisão ficará assim: 


Colisão com a porta da fase1 





E» i Jogador On collision with porta_fase1 Set animation frame to 1 
porta_fase1 
dk System chave = 1 


Figura 7.10: Evento de colisão com a porta 
Nosso sistema de porta e chave está pronto! Foi bem simples, não? 


Nos próximos capítulos, vamos inserir o layout de seleção de fases 
para que, quando o jogador colidir com a porta, além de ela ser 
aberta, ele consiga ir para a próxima fase. Mas antes de fazermos 
isso, vamos continuar com os itens coletáveis e adicionar o sistema 
de pontuação no jogo. 


7.2 Adicionando a pontuação no jogo 


Vamos agora programar a pontuação do jogo, que vai ser somada a 
partir dos itens coletados e inimigos destruídos no decorrer da fase. 
Primeiramente, importaremos um novo tipo de objeto para o layout, 
o de tipo Text . Este tipo nos permite desenhar textos na tela de 
forma estática ou dinâmica. 


Isso significa que podemos usar esse objeto para exibir a pontuação 
atual do jogador. Assim, a cada novo ponto que ele fizer, o valor na 
tela será atualizado. 


Para isso, importe o objeto text no layout da layer ur , como mostra 
a figura seguinte. Dê o nome pontuacao neste objeto de texto. 


Insert New Object 


Double-dick a plugin to create a new object type from: pil o ěć o çě<ě  )] 






Partides Shadow Light Sprite 


BE) 
oH 
Tilemap 





|< 





Name when inserted: | Array 
Description: Store an array of values in up to 3 dimensions. - More help on ‘Array’ 


Figura 7.11: Importando o objeto de texto 


Nas propriedades desse objeto, colocaremos as informações a 
seguir para ele se posicionar no canto superior esquerdo do layout. 


=| Properties 


Text 0 
Initial visibility Visible 
Font Arial( 18) 


Color E o. o.o 
Horizontal alignme... Left 


Vertical alignment Top 


Hotspot Top-left 
Wrapping Word 
Line height 0 


Figura 7.12: Propriedades do objeto de texto 


Na barra de propriedades do objeto, adicionaremos uma variavel 
local, como ja aprendemos no capitulo Sistema de vida e adi ao de 
inimigos, para o objeto pontuacao . Ela será responsável por marcar a 
pontuação do jogo e transferi-la para o objeto de texto. Para ela, dê 
o nome de pont e valor inicial e (zero): 


pontuacao: Instance variables E 


A tts 
Name Type Initial value 
0 pont Number 0 


Figura 7.13: Adicionando uma variavel local ao objeto de texto 


Pronto, agora já temos o nosso contador de pontos funcionando. O 
próximo passo é fazer com que as ações no jogo gerem pontos. 
Como já havíamos combinado, as ações serão: 


e Coletar moedas; 
e Coletar estrelas; 
e Eliminar um inimigo. 


Vamos começar fazendo a colisão com as moedas; cada uma delas 
gerará 100 pontos. Para isso, na ação do evento do jogador 
colidindo com a moeda, escolha o texto pontuacao e dê a ação add 
to para ele. Coloque o valor 100 para a variável local pont , como 
vemos a seguir, pois queremos que sejam somados 100 pontos no 
momento dessa colisão. 


Parameters for pontuacao: Add to 


Choose the instance variable to change. 


oe 


Instance variable | T! pont 


vas 


Cancel Help on expressions Back Done 


Figura 7.14: Add to 


Na segunda ação, vamos "enviar" o valor da variável local pont ao 
texto pontuacao , para o valor dos pontos aparecer na tela do jogo. 
Escolheremos novamente o objeto de texto pontuacao e a ação Set 
text . Coloque os parâmetros a seguir para a transferência dos 
pontos entre a variável e o texto: 


Parameters for pontuacao: Set text 


Enter the text to set the object's content to. 


Text Vale pLTE [es [o s/a iii 


Cancel Help on expressions Back 


Figura 7.15: Set text 


O evento de colisão com a moeda ficará desta forma: 


Colisão com a moeda 


E» ] Jogador On collision with @ @ moeda Destroy 
mona i T; pontuacao Add 100 to pont 
i T; pontuacao Set text to pontuacao.pont 


Figura 7.16: Evento de colisão com a moeda 


Vamos colocar essas duas linhas de ação inseridas também para o 
evento de colisão com a estrela e com O inimigo1 . A figura a seguir 
mostra como ficarão esses dois eventos e suas ações: 


Colisão com a estrela 
né i Jogador On collision with te estrela dy estrela Destroy 
Add 150 to pont 





Set text to pontuacao.pont 


Colisão com o inimigo 


z il Jogador On collision with aià 
inimigo1 
| Y < inimigo1.Y il Jogador Set E Platform vector Y to -700 


d inimigo 1 Destroy 
Add 50 to pont 





Set text to pontuacao.pont 


Figura 7.17: Inserindo o evento pontuacao 


Note que as linhas são iguais, exceto pela diferença no valor dos 
pontos. Colocamos 150 pontos para a colisão com uma estrela e 50 
pontos para a destruição do inimigo. Estes foram os valores que 
escolhemos, mas você tem a liberdade de adicionar qualquer outro 
para essas situações. 


Antes da próxima parte do desenvolvimento do jogo, precisamos 
adicionar mais três ações importantíssimas. Como os valores da 
pontuação, das vidas e do mecanismo de chave são acumulativos — 
ou seja, são contabilizados uma vez que o jogador os ganhou -, 
precisamos resetá-los sempre que o jogador estiver jogando 


novamente o layout. Caso contrário, mesmo que ele perca o jogo, a 
pontuação e a vida serão mantidas. 


Para isso, vamos reseta-las no evento on start of layout , que 
criamos anteriormente no capítulo Movimenta ão e anima ão do 
personagem. Estão lembrados? A intenção é que as variáveis 
globais chave € pontos Sejam setadas com o valor e (zero), e a 
variável local vida dO Jogadoranimacao Seja setada com 3 toda vez 
que o layout for inicializado. Isso porque não queremos que o jogo 
comece com as variáveis do anterior guardadas nele, nem que o 
jogador comece com menos de três vidas. 


Assim, para a ação do evento de inicialização do layout ( on start of 
layout ), escolha o objeto system e a ação set value para ele. Então, 
selecione a variável global pontos e o valor e (Zero), conforme a 
seguir: 


Parameters for System: Set value 


Choose the variable to change. 


Variable | g pontos we 


“pd 


Cancel Help on expressions Back 


Figura 7.18: Set value na variavel global pontos 


Faça a mesma coisa com a variável global chave . Ja para a variável 
local vida do objeto jJogadorAnimacao , temos de inicializá-la com 3, 
pois precisamos que o jogador comece com 3 vidas no início da 


fase. Logo, selecione O Jogadoranimacao € dê a ação Set value. 
Coloque os seguintes parâmetros nessa aba: 


Parameters for JogadorAnimacao: Set value 


Choose the instance variable to change. 
Instance variable | vida = 


bia 


Cancel Help on expressions Back 


Figura 7.19: Set value na variavel local vida 


O evento on start of layout ficará assim: 


>< System On start of layout = JogadorAnimacao Set position to (Jogador.X, Jogador.Y) 
= JogadorAnimacao w Pin Pin to | Jogador (Position & 
angle) 
Ea System Set pontos to O 
Ea System Set chave to O 
= JogadorAnimacao Set vida to 3 


Figura 7.20: Novo evento de inicialização do layout 


Pronto, nosso sistema de pontuação está finalmente concluído. Já 
podemos fazer nosso jogador andar pelo cenário e colidir com os 
itens para somar pontos. Vamos agora configurar nosso sistema de 
corações. 


7.3 Adicionando os corações no jogo 


Agora vamos adicionar os corações ao layout. Eles vão representar 
as três vidas do jogador. Programaremos para que um coração fique 
transparente cada vez que o jogador perder uma vida. 


Primeiro, vamos adicionar uma sprite na layer ur com o nome de 
coracoes . Importe as quatro imagens corações da nossa pasta de 
recursos nos quadros de animação, e coloque-as na ordem correta. 
Isto é, no quadro zero, coloque a imagem de zero coração; no 
quadro 1, coloque a imagem de 1 coração, e assim sucessivamente 
até o terceiro quadro, como a seguir: 
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Figura 7.21: Sequência dos frames dos corações 


Essa ordem é necessária para podermos programar os eventos 
corretamente, como veremos a seguir. 


Não se esqueça de mudar a velocidade ( speed ) na barra de 
animação para zero, pois não queremos criar nenhuma animação 
com esses frames. Posicione a sprite coracoes NO canto esquerdo 
superior da fase, abaixo do texto pontuacao : 








Figura 7.22: Corações inseridos no layout 


Vamos complementar alguns eventos responsáveis por subtrair um 
ponto na vida do jogador, que fizemos anteriormente. Esses eventos 
são os de colisão com O inimigoi, O inimigo2 € O inimigo3. 
Queremos que uma vida seja reduzida e o frame da sprite coracoes 
seja trocado, para indicar que uma vida foi perdida, cada vez que o 
jogador colidir com um dos inimigos. 


Para isso, vamos escolher para a ação desses eventos o objeto 
Sprite coracoes que acabamos de criar e dar a ação de set Frame. 


No campo Frame number , precisamos acessar a variável local vida do 
jogadoranimacao . Para conseguirmos acessar a variável local de um 
objeto, precisamos colocar o nome do objeto, seguido de um ponto, 
e o nome da variável. No nosso caso, jogadorAnimacao.vida , COMO 
mostra a figura a seguir: 


Parameters for coracoes: Set frame 


The animation frame number to set (D-based). 


Frame number fater-telele Valle (o: [o RITO E 


Cancel Help on expressions Back 


Figura 7.23: Set frame para o objeto dos corações 


Isso fara com que o frame da Sprite coracoes mude de acordo com 
o valor que a variável local vida esta guardando. Ou seja, se a 
variável vida estiver com o valor 2,0 frame da sprite coracoes 
será trocado automaticamente para o 2. 


Vamos colocar essa mesma linha de código nos três eventos 
referentes aos inimigos. A figura seguinte mostra como ficará a folha 


de eventos. 





Colisão com o inimigo1 
=? |] Jogador | On collision with aià 


inimigo 1 
i Jogador Y < inimigo1.Y i Jogador Set A Platform vector Y to - 700 
inimigo? Destroy 
iTi pontuacao Add 50 to pont 
iTi pontuacao Set text to pontuacao.pont 
è System Else = JogadorAnimacao Subtract 1 from vida 
= JogadorAnimacao % Is flashing | ***coracoes Set animation frame to 
JogadorAnimacao.vida 
= JogadorAnimacao g Flash: Flash 0.1 on 0.1 off for 1.0 
seconds 
Colisão com o inimigo2 
© Jogador... | On collision with e = JogadorAnimacao Subtract 1 from vida 
inimigos see coracoes Set animation frame to 
= Jogador... % Is flashing JogadorAnimacao.vida 
= JogadorAnimacao F Flash: Flash 0.1 on 0.1 off for 1.0 
seconds 
Colisão com o inimigo3 
® © Jogador... On collision with Si = JogadorAnimacao Subtract 7 from vida 
emma mo “ss coracoes Set animation frame to 
= Jogador... X Is flashing JogadorAnimacao.vida 
= JogadorAnimacao # Flash: Flash 0.1 on 0.1 off for 1.0 
seconds 


Figura 7.24: Eventos inimigos 


Pronto! Finalizamos toda a parte da pontuação do nosso jogo. 
Adicione moedas, estrelas e inimigos no layout e veja o mecanismo 
programado funcionar, tanto no contato com os itens coletáveis 
quanto na pontuação atualizada na tela. 


No próximo capítulo, vamos inserir alguns efeitos para nosso jogo 
ficar ainda mais bacana e criar novos layouts. 


CAPÍTULO 8 
Criando efeitos e outros Layouts 


Chegamos à parte de deixar o nosso jogo mais interessante! Neste 
capítulo, vamos inserir um efeito de chuva no nosso layout, somente 
para diferenciar nossas fases e deixá-las mais bonitas. Esse efeito 
será criado a partir do sistema de efeitos e partículas do Construct 
2. 


Também criaremos um efeito de água para representar os rios que 
servirão de obstáculos nas fases. A ideia é que, quando o jogador 
cair dentro da água, ele perca uma vida e volte para o início da fase. 
Logo em seguida, começaremos a trabalhar em novos layouts para 
o jogo. Prontos? 


8.1 Inserindo partículas 


O objeto particles (partículas) permite gerar efeitos visuais, criando 
e movendo muitas imagens pequenas de forma independente 
dentro do cenário. Assim, é possível criar diversos tipos de efeitos, 
como chuva e neve, por exemplo. Muitas vezes, um simples ponto 
colorido em um fundo preto é suficiente para criar um efeito bem 
bacana. 


Confira a figura a seguir, em que temos um objeto de partícula de 
um simples ponto colorido ao lado esquerdo, e é mostrada essa 
mesma partícula no navegador ao lado direito. 





Figura 8.1: Adicionando partículas 


A criação de partículas costuma ser um trabalho bastante 
complicado. Em plataformas como o Unity ou o Unreal, este 
processo pode ser bastante complexo. Felizmente, o Construct 2 faz 
todo este trabalho pesado para nós. Tudo isso é feito por meio do 
sistema de partículas. 


No nosso jogo, vamos inserir um efeito de chuva. Para isso, 
usaremos o objeto Particles . Na aba de inserção de objetos, 
selecione-o, como mostra a figura: 


Insert New Object 


Double-dick a plugin to create a new object type from: pl 
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Figura 8.2: Inserindo um objeto de particula 


Insira-o na camada de nome Principal e nomeie-o de 
chuvaParticula . No editor de imagens, importe a imagem pingo do 
diretório partícula da nossa pasta de recursos. Use a ferramenta 
resize do editor para ajustá-la para 14x22 pixels, pois este é um 
bom tamanho para um pingo de chuva em relação ao tamanho do 
nosso layout. Agora coloque-o acima do layout, como mostra a 


figura: 


ma i E o, re RD 


Figura 8.3: Objeto de partícula inserido acima do layout 





Nas propriedades da partícula, vamos primeiramente mudar o 
ângulo ( Angle ) para 9e graus. Isso fará com que os pingos caiam 
no sentido de cima para baixo. Para configurar a quantidade de 
pingos que cairão na tela, vamos mexer na propriedade Rate . Ela é 
responsável por definir o número de partículas criadas por segundo. 
Para criar um efeito de chuva bacana, sem poluir a tela, insira o 
valor 5ee. 


Agora precisamos configurar o ângulo de curvatura de onde sairão 
os pingos. Repare que, por padrão, este valor é de 60 graus. Esse 


ângulo representa o alcance em graus das partículas. Como 
queremos que as partículas caiam em todo o cenário, precisamos 
configurar essa abertura para 180 graus. Veja só a diferença na 
figura: 











Figura 8.4: Ângulos de curvatura 


Feito isso, precisamos configurar a velocidade das partículas. Isso é 
feito na propriedade speed . Essa velocidade influencia na 
intensidade da geração das partículas no cenário. Como vamos criar 
um efeito de chuva fraca, colocaremos a velocidade em 10 por 
segundo. Para o tamanho inicial das partículas, colocaremos 10 na 
propriedade size também. 


Para fazer a chuva cair em todo o layout, vamos utilizar a 
propriedade x randomizer . Ela define o deslocamento das partículas 
no eixo X do plano cartesiano. Como choverá por todo o caminho, 
colocaremos o tamanho do layout nessa propriedade. Por isso, 
coloque 6eee. 


Para tornar o efeito de chuva ainda mais real, vamos adicionar um 
fator randômico na velocidade das partículas, para que elas caiam 
em tempos diferentes. Para isso, coloque o valor 156 na 


propriedade speed randomiser . Esse valor deixa uma sensação de 
velocidade bacana, sem deixar o efeito estranho. Se colocarmos um 
valor muito alto, algumas partículas ficarão super-rápidas e outras, 
superlentas. O ideal é que tenhamos um equilíbrio. 


Por fim, vamos configurar a gravidade e a aceleração aplicadas nas 
partículas. Elas afetam a intensidade da chuva. Como queremos 
criar um efeito de chuva fraca, colocaremos alguns valores que 
julgamos bacanas. Fique à vontade para alterar e tornar o efeito a 
sua cara, Ok? 


Para configurar a aceleração da chuva, coloque o valor 1 na 
propriedade acceleration . Assim como na física, a aceleração 
determina a taxa de variação da velocidade em função do tempo. 
Em outras palavras, ela indica o aumento ou a diminuição da 
velocidade com o passar do tempo. 


Para a gravidade, coloque o valor seee na propriedade Gravity. A 
gravidade é a força que "puxa" as gotas para baixo. Com essa 
combinação de gravidade, aceleração e velocidade, alcançamos um 
efeito bonito. Para finalizar e tornar o efeito ainda mais legítimo, 
tornaremos a opacidade de cada partícula diferente uma da outra. 


Conseguimos esta proeza com a propriedade opacity randomiser . Ela 
funciona de forma semelhante ao speed randomiser . Ela acrescenta 
um valor randômico à opacidade da partícula, deixando-a mais clara 
ou transparente. Insira o valor 10 para ela alterar levemente a 
transparência de algumas das partículas. 


Queremos que os pingos sejam destruídos depois de algum tempo, 
para evitar que o jogo fique lento. Portanto, em Destroy mode , 
escolha a opção Timeout expired €, em Timeout , coloque o valor 2. 
Isso fará com que eles sejam destruídos sempre após 2 segundos 
de sua criação. Com todos esses valores nos campos das 
propriedades da partícula, teremos o seguinte: 


=| Properties 


Rate 500 
Spray cone 180 
Type Continuous spray 
Image Edit 
=| Initial particle properties 
Speed 10 
Size 10 
Layer Principal Opacity 100 
Angle 90 Grow rate 0 
Opacity 100 X randomiser 6000 
+) Position 373, -448 Y randomiser 0 
+) Size 128, 128 Speedrandomiser 150 
Size randomiser 0 


Grow rate randomi... O 


= Particle lifetime properties 
Acceleration 1 
Gravity 5000 


Angle randomiser 0 

Speed randomiser 1 

Opacity randomiser 10 

Destroy mode Timeout expired 
Timeout 2 


Figura 8.5: Propriedades da particula de chuva 


Pronto, já podemos testar o jogo e ver a simulação de chuva 
funcionando! 


8.2 Adicionando efeitos 


Agora que vimos um pouco do funcionamento das partículas, vamos 
partir para os efeitos. Os efeitos ( effects ) têm a função de alterar a 
aparência visual dos objetos em cena. Eles podem também ser 
adicionados a camadas ou layouts inteiros. 


Entretanto, os efeitos que se misturam com o plano de fundo não 
podem ser usados em layouts, pois o plano de fundo acabará 
anulando-o. Na figura a seguir, temos um exemplo de uma sprite 
com o efeito water (água) ao lado esquerdo e uma sprite sem 
efeito ao lado direito. 





Figura 8.6: Diferença de imagem com e sem efeito de água 


Conseguimos adicionar vários efeitos em um único objeto, camada 
ou layout. Quando isso acontece, os efeitos são acorrentados. Isto 
é, o segundo efeito só vai começar quando o primeiro terminar, e o 
terceiro só começará quando terminar o segundo, e assim por 
diante. 


O Construct 2 contém uma ampla biblioteca com mais de setenta 
efeitos. Um grande número de exemplos de efeitos é mostrado na 
pasta de exemplos da plataforma, conforme já mencionamos. 


Para o nosso jogo, vamos adicionar um efeito de água para 
representar um "rio" no Layout Fase1 que estamos criando. Para 
isso, adicione primeiramente uma sprite com uma cor azul clara e o 
nome de agua na layer fundo, conforme a seguir: 


o Edit image: agua (Default, frame 0) x 
OwABCPS XYHR + FOC H27\/QQQ E 
EI Tolerance [4 tè 


D$NDONNAO 





< 
100% Mouse: 186, -37 250 x 250 PNG-32 


Figura 8.7: Adicionando uma Sprite para representar a agua 


Coloque-a no layout, clique sobre ela e va até a barra de 
propriedades do projeto. Então, escolha a opção de add/edit Effects 
e clique em + na aba Effects . Em seguida, a caixa de diálogo ada 
effect abrirá, e nela será possível adicionarmos os efeitos. Escolha 
O WaterBackground para dar um efeito de agua: 


Frequency 4 Add effect 




















Angle 7 
Delta 20 Double-click an effect to add: LP 
Reflectivity 400 
Emboss 30 a E Name Support — E 
= e O DO a) | ico mean 
Add / edit Effects F% Sphere WebGL only 
= Container =i E Fe Stretch WebGL only 
No container Create | a: E | F= Swirl WebGL only 
3 Properties = | fa Warp WebGL only 
Animations Edit [+]4 it y | f* Warp Mask WebGL only 
Size Make 1:1 Name Type | F% Warp Radial WebGL only 
itial visibili sci | fx Warp Ripple WebGL only 
Initial visibility Visible fx WaterBackground Water background a | seas pega 
Initial animation Default er ph 
= Fewaterbacdgroud —SS~*d 
Initial frame 0 [Fewster background] Web. oniy 
Collisions Enabled | Normal mapping 
More information Help | 4% Bumpmapping WebGL only 
v 
v An animated water-surface like distortion that also distorts the background. 
(By: Viktor Korsun) 
= Es 





Figura 8.8: Efeito de água 


Você vai perceber que a imagem agua já foi modificada, porém, não 
queremos o efeito deste jeito, pois temos uma "onda" grande nesta 
imagem e desejamos deixá-la mais suave para o nosso rio. 
Portanto, vá até a barra de propriedades novamente e coloque os 
seguintes parâmetros no efeito waterBackground , fazendo-o 
representar ondas suaves: 


=| WaterBackground 
Speed 
A speed 
Y speed 
Intensity 
Frequency 
Angle 
Delta 
Reflectivity 


Emboss 


ses “Bes 


Blend mode Normal 


Figura 8.9: Propriedades do efeito WaterBackground 


Estes valores foram obtidos por meio da experimentação. Fique à 
vontade para alterá-los e deixar o resultado que mais gostar. Porém, 
independente do valor, podemos colocar essa sprite com efeito de 
água em vários lugares do layout, como vemos na figura: 





Figura 8.10: Efeito de água inserido no layout 


Assim, criamos o nosso efeito de água! 


Neste ponto, já temos o nosso primeiro layout praticamente pronto. 
Inserimos o jogador, as plataformas, os inimigos, as moedas e as 
estrelas, e trabalhamos com todos os sistemas necessários para 
movimentação, colisão e pontuação. Aos poucos, estamos 
terminando o projeto. 


Não se preocupe, pois ainda veremos como funcionam os botões, 
as músicas e os sons nos próximos capítulos. A seguir, vamos 
começar a inserir mais layouts de telas e fases no nosso jogo. 


8.3 Criando outros layouts 


Agora que desenvolvemos bastante o nosso Layout Fase1 , vamos 
inserir mais três layouts em nosso jogo: um para a tela inicial, um 
para a seleção de fases e, por fim, outro para a segunda fase. 


Antes disso, vamos colocar mais um evento em nossa Event Sheet : 
o jogador perderá uma vida e voltará ao início do jogo toda vez que 
ele sair do layout (ou seja, cair dentro do rio). Escolha a sprite 
Jogador Na janela Add event e dê a condição Is outside layout para 
ela: 


Edit condition 


Double-click a condition in Jogador": P Do 





Platform: Animation triggers 


x On fall x On jump 
1 On landed 1 On moved 
sa On stopped 
Size & Position 
y Compare height 1 Compare width 
l Compare X y Compare Y 
I Is on-screen ï Is outside layout 


y Pick nearest/furthest 


Web 
A On image URL loaded 











Z Order 
1 Is on layer i Pick top/bottom 
y 
Cancel Help on 'Sprite' conditions Back 


Figura 8.11: Condição Is outside layout 


Para essa ação, vamos escolher aquelas duas ações que subtraem 
o valor 1 da variável local vida dO Jogadoranimacao e setam o frame 


coracoes COM O mesmo valor dessa variável. Para isso, escolha a 
Sprite Jogadoranimacao € dê a ação Subtract from COM parâmetro 1 
para a variável local vida. Para a próxima ação, escolha a sprite 
coracoes , a aÇãO Set frame € O parâmetro JogadorAnimacao.vida NO 
Campo Frame number . 


A última ação será responsável por fazer o jogador voltar ao início 
do layout toda vez que sair dele. Para isso, selecione o Jogador e dê 
a condição set position para ele, colocando o valor 94 para X e 454 
para Y, como mostra a figura a seguir. 


Parameters for Jogador: Set position 


New X co-ordinate, in pixels. 


Cancel Help on expressions Back Done 


Figura 8.12: Ação Set position 


Note que esses valores de X e Y são os mesmos que a sprite 
Jogador tem no começo do jogo. Se você quiser que ele "renasça" 
em outro lugar, basta colocar a posição desejada em X e Y. 


O seu evento ficará parecido com este: 


t Jogador Is outside layout $ JogadorAnimacao Subtract 1 from vida 
ses coracoes Set animation frame to JogadorAnimacao.vida 


| Jogador Set position to (94, 454) 


Figura 8.13: Evento do jogador saindo do layout 
Tela inicial 


Vamos criar agora mais um layout para ser a tela inicial do nosso 
jogo. Para isso, clique com o botão direito do mouse na pasta 
Layouts € escolha a opção Add layout , como mostra a figura: 








Figura 8.14: Add layout 


Como não queremos criar uma nova folha de eventos, escolha a 
opção Don't add event sheet (não adicionar folha de eventos) na 
janela Add layout , como a seguir: 


Construct 2 - Add layout a” 


Do you want to add an event sheet for this 
layout as well? 


— Add event sheet 
The new layout will use the new event sheet. 


— Cancel 
Don't add anything. 


Figura 8.15: Don't add event sheet 


Essa ação fara com que o novo layout continue vinculado a folha de 
eventos que já temos. Dê o nome Telainicial a ele e ajuste o seu 
tamanho no Layout size para 640x480 pixels. Escolhemos esse 
tamanho porque corresponde à parte da área pontilhada (ou seja, a 
área visível). 


Importe um objeto de Tiled background , para ser a nossa imagem de 
fundo dessa tela. No editor de imagens, importe a imagem 
telainicial da nossa pasta Telas . Ajuste-a de modo que cubra toda 
a sua extensão, como mostra a figura seguinte: 





Figura 8.16: Tela inicial do jogo 


Por fim, como queremos que esta seja a primeira tela do jogo, 
precisamos dizer isso ao Construct 2. Portanto, vá até a aba de 
propriedades do projeto e procure pela opção First layout . La, 
procure pelo layout que acabamos de criar, O Tela Inicial: 


El Project settings 
First layout 
Use 
Pixel rounding 
Preview effects 
+ Window Size 


loader layout 


El Configuration Settin 


Telalnicial 
(default) | 


Telalnicial 


TelaSelecaoFases 


Fasel 
Fase? 
— 





Figura 8.17: Escolha do primeiro layout 


Seleção de fases 


Vamos criar mais um layout, agora para ser a seleção de fases. 
Faça o mesmo processo anterior: adicione um novo layout e ajuste- 
o com o mesmo tamanho (640x480 pixels), pois também queremos 
somente a parte da área visível nele. Então, dê o nome 


TelaSelecaoFases . 


Importe novamente um objeto de Tiled background e, no editor de 
imagens, importe a imagem telaselecaofases , que também está na 
pasta Telas . Ajuste para que cubra toda a extensão do layout, como 


fizemos com a Telainicial : 


Seleção de Fases 





Figura 8.18: Tela de seleção de fases 


8.4 Fase 2 


Agora vamos criar mais uma fase para o nosso jogo. Para facilitar o 
nosso trabalho, vamos duplicar a Fase1 e somente alterar o seu 
design, pois assim manteremos outros elementos que não mudam, 
como as layers, posição do jogador, tela de game over etc. 


Para clonar um layout, selecione-o, clique com o botão direito e 
escolha a opção Duplicate, como mostra a figura: 





v Em Candy World* 
v E Layouts 
(| Telalnicial 
(S| TelaSelecaoFases 


Edit event sheet 


g Help on layouts 


Layers 





Figura 8.19: Duplicate layout 


Dê o nome de Fasez nesse layout duplicado. A sequência dos 
layouts criados ficará assim: 


Projects n E 
+ [E Candy World* A 
v Em Layouts 
(S| Telalnicial 
(MS) TelaSelecaoFases 


(| Fasel 
(| Fase? 
v fi Event sheets 


Programação 


Figura 8.20: Sequência da barra de projetos 


Com o layout criado, agora precisamos desenvolver um design 
diferente para a nossa segunda fase. Você pode colocar mais 
obstáculos e inimigos para ficar mais difícil do que a primeira. Utilize 
os diversos recursos da pasta disponibilizada e a sua criatividade 
para criá-la. 


Agora que criamos todos os layouts que usaremos no jogo, vamos 
inserir mais uma ação para o evento criado de quando o jogador 
colide com a porta, incluído no capítulo anterior ao final da fase. 
Para essa ação, selecione o objeto de sistema ( system ), dê a ação 
de Go to layout € escolha a TelaselecaoFases NO campo Layout. O 
evento ficara desta forma: 


» i Jogador On collision with porta fasel porta fase Set animation frame to 1 
a System chave = 1 a System Go to TelaSelecaoFases 


Figura 8.21: Evento de colisão com a porta 


Portanto, toda vez que o jogador colidir com a porta e já estiver com 
a chave (variável chave iguala 1),a porta abrirá (frame porta igual 
a 1). Na última ação que incluímos agora, o jogador vai para a tela 
de seleção de fases. 


No próximo capítulo, colocaremos os botões em todas as nossas 
telas. 


CAPÍTULO 9 
Trabalhando com botões 


Agora que temos todas as telas do jogo criadas, vamos começar a 
trabalhar com botões e finalizar alguns tópicos que já deixamos pré- 
prontos, como as telas de fim de jogo e de pausa. Veremos como 
criá-los e programá-los. O procedimento é bem simples. Ao final do 
capítulo, usaremos os conceitos para colocar o controle mobile com 
os devidos eventos para o jogo funcionar em qualquer dispositivo 
móvel. 


9.1 Adicionando os botões 


Vamos primeiramente adicionar todos os botões que precisaremos 
no jogo e, logo em seguida, começar a programar seus eventos. 
Começaremos pelo Layout Telainicial . 


Insira o botão que será responsável por levar o jogador à tela de 
seleção de fases quando clicado, que será chamado de Jogar . Para 
isso, adicione uma sprite com o nome btn jogar, na camada ui. 
Importe nela a imagem btn-jogar da nossa pasta de recursos 

Botões , € posicione no layout, conforme mostramos a seguir: 





Figura 9.1: Tela inicial com o botão começar inserido 


Agora vamos inserir dois botões no Layout TelaselecaoFases . O 
primeiro será responsável por levar o jogador para a primeira fase e 
o segundo, para a segunda fase do jogo. Para isso, crie duas 
Sprites na layer ul: uma com o nome btn_fase1 , e outra com o 
nome btn fasez . Em seguida, insira as duas imagens da nossa 
pasta de Botões chamadas btn-fasei € btn-fase2 , respectivamente, 
nessas sprites criadas. Posicione no layout conforme a seguir: 


“em 


we. 
Seleção de ` 





Figura 9.2: Tela de seleção de fases com os botões inseridos 


Agora vamos partir para o botão de pausa que, quando clicado, vai 
pausar todo o sistema do jogo e mostrará a tela de pausa, inserida 
no capítulo Telas de pausa e de fim de jogo. Esse botão ficará 
posicionado ao lado superior direito, dentro da área pontilhada dos 
layouts Fase1 € Fasez, de acordo com a figura a seguir: 





Figura 9.3: Botão de pausa inserido no layout 


Para isso, adicione uma sprite com o nome btn pausa na layer ur, 
e importe nela a imagem btn-pausa da nossa pasta Botões. 


Por último, vamos inserir dois botões para a tela de fim de jogo, e 
mais dois para a tela de pausa. Ambas terão um botão para voltar à 
tela de seleção de fases, entretanto, a de pausa terá um 
especialmente para voltar ao jogo enquanto que a de fim de jogo 
terá um que permitirá ao jogador tentar novamente aquela fase. 
Faça o mesmo processo que fizemos para os outros para inserir os 
botões nas sprites , tudo sempre na layer ur. 


Para a tela de fim de jogo, importe os botões btn-positivo € btn- 
negativo, O dê o nome de btn telaGameoverSim © btn telaGameoverNao 
nas sprites, respectivamente. Já para a tela de pausa, importe os 


botões btn-continue € btn-fases ,e dê o nome de 
btn_telaPauseContinue © btn_telaPauseFases , respectivamente. 


Lembre-se de que todos eles estão disponibilizados na nossa pasta 
de recursos, a Botões . Posicione-os exatamente como mostra a 
figura a seguir. 





Figura 9.4: Telas de fim de jogo e de pausa com os botões inseridos 


Adicione uma Behavior Pin nos quatro botões importados agora. 
Assim, poderemos programá-los para que fiquem "colados" às telas 
de game over e de pausa quando elas "descerem" para o meio do 
layout. 


Pronto! Acabamos de adicionar os comportamentos necessários em 
todos os botões do nosso jogo. Muito fácil, não é mesmo? O 
próximo passo é adicionar os eventos referentes a eles. Vamos lá! 


9.2 Programando os eventos dos botões 


Na folha de eventos, colocaremos mais quatro ações na condição 
On start of layout : duas serão dos botões da tela de fim de jogo 

( btn_telaGameoverSim © btn_telaGameoverNao ) coma ação Pin to object 
no objeto Tela gameover ; e mais duas dos botões da tela de pausa 


( btn telaPauseContinue @ btn_telaPauseFases ) com a ação Pin to object 
no objeto Tela pause. 


Isso fará com que todos os botões fiquem "colados" em suas 
respectivas telas toda vez que o layout for iniciado. O nosso evento 
On start of layout ficará como a seguir: 


> System On start of layout => JogadorAnimacao Set position to (Jogador.X, Jogador.Y) 
=> JogadorAnimacao x Pin Pin to if Jogador (Position & angle) 
=> JogadorAnimacao Set vida to 3 
ZÈ system Set estrelas to 0 
a System Set pontos to O 
a System Set chave to O 


EM btn telaGameoverNao x Pin Pin to = Tela gameover (Position & angle) 
EM btn telaGameoverSim x Pin Pin to =% Tela gameover (Position & angle) 
[P Jbtn telaPauseContinue x Pin Pin to $s Tela pause (Position & angle) 
[E]btn telaPauseFases x Pin Pin to ss Tela pause (Position & angle) 


Figura 9.5: Evento On start of layout 
Eventos da tela de pausa 


Agora vamos inserir os eventos com as ações para cada botão que 
criamos. Para o botão btn pausa , adicionaremos as que farão com 
que o sistema do nosso jogo "pare" toda vez que for clicado. 


Primeiro, vamos fazer com que nosso jogador fique desativado 
quando o jogo estiver pausado. Para isso, escolha o objeto Touch, 
dê a condição Is touching object € escolha o objeto btn pausa. Na 
ação desse evento, selecione o objeto Jogador e dê a ação set 
enable (definir habilitação) e, no campo state (estado), escolha 
Disabled (desativado), como mostra a figura a seguir. 


Parameters for Jogador (Platform): Set enabled 


Set whether to enable or disable the behavior. 


State Disabled “e 


Cancel Help on expressions Back Done 


Figura 9.6: Set enable 


Na próxima ação, faremos com que o tempo do layout "pare" 
também quando o jogo estiver pausado. Para isso, escolha o objeto 
de sistema (system ) e dê a ação set time scale. NO campo Time 
scale , Coloque o valor o (zero). 


Para a próxima e última ação, vamos fazer com que a tela de pausa 
apareça no meio do layout quando o jogo estiver pausado. Para 
isso, será necessário mudar a posição da tela para as coordenadas 
que correspondem a exatamente o meio da tela da fase. Escolha o 
objeto Tela pause, dê a ação Set position, e coloque os valores 320 
e 240 para X e Y, respectivamente. No final, nosso evento ficará 
como a figura a seguir. 


4) Touch Is touching (m) i Jogador Set E Platform Disabled 
im pousa dk System Set time scale to 0 
pes Tela pause Set position to (320, 240) 


Figura 9.7: Evento do botão de pausa 


Agora, vamos adicionar os eventos referentes aos dois botões 
contidos na tela de pausa. Queremos que O btn telaPausaContinue 
despause o jogo e faça com que nosso jogador continue 


exatamente de onde parou. Para isso, precisamos fazer três ações 
contrárias às ações que fizemos para pausar o jogo. 


Para esse evento, vamos escolher o objeto Touch e dar a condição 
On touched object . Escolha o objeto btn telaPausaContinue . Na ação 
desse evento, selecione o objeto Jogador e dê a ação set enable. No 
Campo state, escolha Enable . Essa ação fará com que nosso 
personagem seja destravado. 


Na próxima ação, vamos voltar ao tempo normal do layout. Para 
isso, escolha o objeto de sistema ( system ) e dê a ação set time 
scale . NO campo Time scale, coloque o valor 1. 


Na próxima e última ação, faremos com que a tela de pausa 
desapareça do meio da tela. Logo, teremos de definir uma posição 
totalmente fora do layout. Vamos escolher o objeto Tela pause e dar 
a ação set position . Coloque os valores 320 e -4000 para X e Y, 
respectivamente. Eles são os valores para a tela de pausa ir a um 
ponto totalmente fora do layout. 


No final, nosso evento ficará assim: 


= 4) Touch On touched [>| | Jogador Set A Platform Enabled 
aah nenem dk System Set time scale to 1 


pes Tela pause Set position to (320, -4000) 


Figura 9.8: Evento do botão continuar 


Agora vamos adicionar o evento do botão btn_telaPausaFases . 
Queremos que ele seja responsável por levar o jogador à tela de 
seleção de fases. Então, vamos escolher o objeto Touch e dar a 
condição on touched object . Depois, selecione o objeto 


btn telaPausaFases . 


Na primeira ação desse evento, vamos de novo voltar o tempo 
normal do layout. Precisamos fazer isso para evitar que o jogo 
continue congelado mesmo depois de sair da fase. Escolha o objeto 


de sistema ( system ), dê a ação set time scale €, NO campo Time 
scale , Coloque o valor 1. Lembre-se de que o 1 representa a 
velocidade padrão. 


Na próxima ação, escolha novamente o objeto system e dê a ação 
Reset global variables . Isso fará com que todas as variáveis globais 
sejam reiniciadas quando sair do layout, assim, quando começar um 
novo jogo, as variáveis não estarão guardando valores do anterior. 


Na última ação desse evento, vamos fazer com que o jogador vá à 
tela de seleção de fases. Logo, escolha o objeto system mais uma 
vez e dê a ação Go to layout . No campo Layout , escolha o 
TelaSelacaoFases , COMO mostra a seguir. 


Parameters for System: Go to layout 


Choose the layout to go to. 


Layout 'TelaSelecaoFases ta 


Cancel Help on expressions Back 


Figura 9.9: Go to layout 
Por fim, o nosso evento ficará como a figura seguinte: 


a 4) Touch On touched [=] e System Set time scale to 1 
btn_telaPauseFases pa System Reset global variables to default 


Ea System Go to TelaSelecaoFases 


Figura 9.10: Evento do botão de fases 


Pronto, agora o nosso sistema de pausa está todo programado! 
Teste e veja como os botões estão funcionando corretamente. 


Eventos da tela de fim de jogo 


O próximo passo é inserir os eventos dos dois botões da nossa tela 
de fim de jogo. Para o evento do botão btn telaGameoversim , 

responsável por fazer o jogador continuar a jogar, vamos escolher o 
objeto Touch , dar a condição on touched object e selecionar o objeto 


btn telaGameoversSim. 


Na primeira ação desse evento, queremos ativar o comportamento 
de plataforma do nosso jogador. Para isso, escolha o objeto 
Jogador , dê a ação Set enable e, no campo state, escolha Enable. 


Na segunda ação, novamente voltaremos ao tempo normal do 
nosso layout. Como fizemos das outras vezes, escolha o objeto de 
sistema ( System ), dê a ação set time scale €e, NO campo Time scale, 
coloque o valor 1. 


Na terceira ação, escolha o objeto system e dê a ação Reset global 
variables . Isso fará com que todas as variáveis globais do nosso 
jogo sejam iniciadas. 


Para a próxima e última ação desse evento, escolha o objeto system 
e dê a ação Restart layout . Assim, O layout será reiniciado e o jogo 
começará do início. Ao final, nosso evento ficará assim: 


a 4y) Touch On touched EM q Jogador Set E Platform Enabled 
btn_telaGameoverSim a System Set time scale to 1 
a System Reset global variables to default 
dk System Restart layout 


Figura 9.11: Evento do botão telaGameoverSim 


Para o evento do botão btn_telaGameoverNao , responsável por fazer o 
jogador voltar à tela inicial do jogo, vamos escolher o objeto Touch e 


dar a condição on touched object . Depois, escolha o objeto 


btn telaGameoverNao . 


Para a primeira ação desse evento, vamos fazer com que o 
comportamento de plataforma do Jogador seja desativado. Faremos 
isso para evitar que o jogador consiga movimentar o personagem 
quando ele está sem vidas. Para isso, escolha o objeto Jogador , dé 
a ação set enable €, no campo state, escolha Disabled . 


Para a segunda ação, vamos mais uma vez voltar ao tempo normal 
do layout. Então, escolha o objeto de sistema ( system ), dê a ação 
Set time scale €, NO campo Time scale, coloque o valor 1. Para a 
terceira ação, escolha o objeto system e dê a ação Reset global 
variables , para que as variáveis globais sejam iniciadas. 


Na quarta e última ação deste evento, faremos com que o jogador 
vá à tela inicial do jogo. Logo, escolha o objeto system, dê a ação Go 
to layout €, NO Campo Layout , selecione O TelaInicial . Nosso 
evento ficará como a figura a seguir. 


> A Touch On touched mm | Jogador Set A Platform Disabled 
ee eee SF system Set time scale to 7 
ra) System Reset global variables to default 
ray System Go to Telalnicial 


Figura 9.12: Evento do botao telaGameoverNao 


Pronto, terminamos o sistema da nossa tela de fim de jogo. Agora 
só falta adicionarmos os eventos dos botões da tela de seleção de 
fases e do botão Jogar da tela inicial. 


Eventos da tela de seleção de fases 


Para os botões btn fasei € btn fasez da tela de seleção de fases, 
vamos adicionar um evento para quando um ou outro for clicado, o 
jogador irá para a primeira ou segunda fase do nosso jogo, 
respectivamente. 


Assim, vamos escolher o objeto Touch, dar a condição on touched 
object , € selecionar o objeto btn_fase1 . Na ação, escolha o objeto 
System, dê a ação Go to layout €, NO CAMPO Layout , escolha a 
Fasel . Faça a mesma coisa com o objeto btn_fase2 ; a diferença é 


que, no campo Layout da ação Go to layout , você precisa escolher 
a Fase2. 


Eventos da tela inicial 


Por fim, vamos adicionar o evento do botão Jogar da tela inicial. 
Quando clicado, ele levará o jogador à tela de seleção de fases. 


Desta forma, escolha o objeto Touch, dê a condição on touched 
object , € selecione o objeto btn jogar . Para a ação, escolha o objeto 


System, dê a ação Go to layout €, NO CAMPO Layout , escolha a 
TelaSelecaoFases . 


Esses três últimos eventos ficarão como a seguir: 


119 A Touch On touched |*=: btn_fase1 Ea System Go to Fase1 
2 |> 4) Touch On touched $ btn_fase2 gè System Go to Fase2 
31/9 A Touch On touched == btn_jogar a System Go to TelaSelecaoFases 


Figura 9.13: Evento dos botões da tela inicial e de seleção de fases 


9.3 Adicionando e programando os controles 
mobile 


Neste momento, precisamos inserir os três botões que farão o 
jogador pular e andar para a direita e a esquerda nos dispositivos 


móveis. Assim, importe uma sprite com o nome de 

btn mobile Esquerda na layer ur, e insira nela a imagem btn-mobile- 
esquerda da nossa pasta de Botões . Importe uma outra sprite na 
layer ur com o nome de btn mobile Direita, € insira nela a imagem 
btn-mobile-direita da mesma pasta. Por fim, importe mais uma 
Sprite Com O nome de btn mobile Pulo na layer ur, e insira a 
imagem btn-mobile-pulo nela. 


Adicione uma colisão simples ( set to bounding box ), como 
explicamos no capítulo Estrutura inicial, nessas três imagens 
importadas e posicione nos layouts Fase1 € Fasez, como mostra a 
seguir. 





Figura 9.14: Botões mobile inseridos no layout 


Agora vamos adicionar os eventos a esses botões. Para o botão 
btn mobile Esquerda , responsável por fazer O Jogador Se movimentar 
para a esquerda, vamos adicionar o seguinte evento. Escolha o 
objeto Touch, dê a condição Is touching object , e selecione o objeto 


btn mobile Esquerda. 


Para a ação, escolha a Sprite Jogador , dê a ação Simulate control €, 
no campo control , escolha a opção Left . Ela fará com que o 
comportamento de plataforma do jogador seja simulado para a 
esquerda. Então, a cada toque neste botão, ele dará um passo à 
esquerda e, para fazê-lo andar, é necessário manter este botão 
pressionado. 


Na próxima ação, escolha a sprite Jogadoranimacao , dê a ação Set 
mirrored €, NO campo state, escolha a opção Mirrored . Essa ação 
fará com que a animação do jogador seja setada para o lado que ele 
estiver andando. 


Para o botão btn mobile Direita, responsável por fazer O Jogador se 
movimentar para a direita, vamos adicionar o seguinte evento. 
Escolha o objeto touch , dê a condição Is touching object , e escolha 
o objeto btn mobile Direita . Para a ação, escolha a sprite Jogador, 
dê a ação Simulate control e, NO campo control, escolha a opção 
Right . Ela fará com que o comportamento de plataforma do jogador 
seja simulado para a direita. 


Na próxima ação, escolha a sprite Jogadoranimacao , dê a ação set 
mirrored €, NO campo state, escolha a opção Not Mirrored . Isso fará 
com que a animação do jogador seja setada para o lado que ele 
andar — ou seja, para a direita nesse caso. Com isso, teremos os 
seguintes eventos: 


4) Touch Is touching (e) i Jogador Simulate A Platform pressing Left 
btn mobile Esquerda 


= JogadorAnimacao Set Mirrored 
4) Touch Is touching © ) q Jogador Simulate A Platform pressing Right 
Sm became to = JogadorAnimacao Set Not mirrored 


Figura 9.15: Eventos dos botões mobile dos movimentos de esquerda e direita 


Por último, para o botão btn mobile Pulo, que será responsável por 
fazer O Jogador pular, vamos adicionar o seguinte evento. Escolha o 
objeto Touch, dê a condição Is touching object e escolha o objeto 
btn mobile Pulo. 


Para a ação, escolha a Sprite Jogador , dê a ação Simulate control €, 
no campo control, escolha a opção Jump (pular), como mostra a 
figura a seguir. É possível alterar a força do pulo nas propriedades 
da Behavior Platform do objeto Jogador : 


=| Behaviors 


=| Platform 
Max speed 330 
Acceleration 1500 
Deceleration 1500 
Jump strength 650 
Gravity 1500 


Max fall speed 1000 
Double jump Enabled 
Jump sustain 0 
Default controls Yes 
Initial state Enabled 


Figura 9.16: Configurando a altura do pulo do jogador 


Para o nosso jogo, mantemos a configuração padrão de 650 pixel 
por segundo, porém, dependendo da altura que você colocar os 
obstáculos/plataformas no seu jogo, você pode modificar o campo 
Jump Strength (Força do pulo) para um valor mais alto ou mais baixo. 


4) Touch Is touching (*) J Jogador Simulate A Platform pressing Jump 
btn mobile Pulo 


Figura 9.17: Evento dos botões mobile do movimento de pulo 


Pronto, agora temos todos os nossos botões funcionando 
corretamente. Já podemos testar e até jogar para ver como está 
ficando! No próximo capítulo, ensinaremos como dar mais vida ao 
jogo ao inserir efeitos sonoros e música de fundo. 


CAPÍTULO 10 
Música e sons 


Há vários aspectos que precisam ser considerados quando criamos 
um jogo, e passamos por muitos deles ao longo dos capítulos. 
Falamos sobre jogabilidade, usabilidade, gráficos etc., mas ficou 
faltando algo, não é mesmo? Neste capítulo, explicaremos tudo o 
que é necessário saber para trabalhar com áudio dentro do 
Construct 2. 


Mostraremos como adicionar arquivos de áudio na plataforma, quais 
formatos são aceitos, quais são as diferenças entre os efeitos 
especiais e as músicas de fundo, e como podemos colocá-los para 
tocar de acordo com os eventos do jogo. Não se preocupe, é tudo 
extremamente simples. Preparado? Vamos lá. 


10.1 Arquivos de áudio no Construct 2 


Nesta seção, vamos ensinar como importar arquivos de áudio no 
nosso jogo. Mas primeiro precisamos entender a diferenciação que 
o Construct 2 faz entre dois tipos do áudio, sendo que cada um tem 
funções distintas. Estamos falando dos sounds (sons) € music 
(música), arquivos de áudio usados para efeitos de som e música de 
fundo, respectivamente. 


Usamos os sons para efeitos sonoros de curta duração, que são 
reproduzidos quando acontecem eventos programados pelo usuário, 
como uma colisão ou explosão. Já a música é utilizada em trilhas 
musicais mais longas. É o áudio que vai acompanhar todo o 
caminho do jogador, independente do que ele estiver fazendo. 


O Construct 2 faz a diferenciação dos áudios na estrutura do nosso 
projeto. Se voltarmos um pouco a nossa atenção para a árvore de 


diretórios do projeto, veremos que não há uma pasta chamada 
Audios , mas existem duas: music € Sounds , como mostra a figura a 
seguir. Esta organização não é somente para separar visualmente 
os arquivos. O Construct 2 também os trata de forma diferente 
internamente. 


Projects a E 
v E» New project” 

fay Layouts 

far Event sheets 

fa Object types 

far Families 

v fi Files 
fa Icons 


Figura 10.1: Pastas de audios 


Os sons que sao utilizados para efeitos sao todos baixados antes de 
serem reproduzidos, enquanto as musicas sao baixadas de acordo 
com sua transmissão. Isso quer dizer que, se uma faixa de musica 
qualquer for colocada erroneamente na pasta de sounds , ela sera 
carregada totalmente antes de ser reproduzida, ocasionando 
atrasos no jogo. Do mesmo modo, se um som de efeito for colocado 


na pasta de music, ele será reproduzido imediatamente, o que pode 
ocasionar efeitos estranhos. 


Todos os arquivos de áudio do projeto, sejam áudios ou músicas, 
devem ser importados nos formatos Ogg Vorbis ( .ogg ) e MPEG-4 
AAC ( .m4a ). O Construct 2 exige os dois formatos para o mesmo 
áudio para conseguir dar suporte a todos os navegadores e devices. 
Mas para facilitar a nossa vida, podemos importar o áudio somente 
no formato .wav, que o Construct vai convertê-lo automaticamente 
para os dois formatos necessários. 


Agora que entendemos o papel dos dois tipos de áudio e quais são 
suas diferenças, vamos colocar a mão na massa. 


10.2 Adicionando os efeitos sonoros 


Na pasta Áudios que está dentro da nossa pasta de recursos, há 
uma melodia que colocaremos como música de fundo no layout da 
Fasel e da Fase2. Lá também existem quatro efeitos sonoros que 
vamos acrescentar a algumas situações do jogo, como quando o 
jogador "destruir" um inimigo, "recolher" um item coletável ou até 
clicar em um botão. Para facilitar, todos os arquivos de áudios 
disponibilizados já estão em formato .wav . 


Começaremos trabalhando com os efeitos sonoros. Encontre os 
arquivos som-botao , som-chave , som-estrela € som-inimigo , O depois 
os importe para a plataforma. Para adicionar um som, clique com o 
botão direito do mouse sobre a pasta sounds e na opção import 
sounds (importar sons), como mostra a figura a seguir: 





Projets ap 
v [E Candy World* 
v E Layouts 
(BS) Telalnicial 
(| TelaSelecaoFases 
(S| Fasel 
(Be) Fase? 
> E Event sheets 
> lp Object types 
fa Families 


kl rir 





Add subfolder 
Rename 


Delete 


Auto-import all in folder 





O Help on sound 


Figura 10.2: Importando um arquivo de som 


Na janela Import audio files (importar arquivos de áudio), importe o 
áudio chamado som-botao e, em seguida, clique em Import : 


Import audio files x 


O Importing 16-bit PCM Wave files is recommended. Construct 2 will encode all files to Ogg 
Vorbis and AAC for browser support. Files with a warning icon may not be able to be 
converted. More about audio support 





File Details 
@ som-botao.wav PCM - mono - 16-bit - 44100 Hz 











OGG/AAC encoding quality: 96 kbps (lowest quality, quicker download) ~ 
Add more files... Cancel 


Figura 10.3: Import audio files 


Note que o Construct 2 vai automaticamente converter para dois 
arquivos de áudio nos formatos .ogg e .m4a, dentro da pasta 
Sounds , Como mostra a figura: 


Import audio files x |Projeds ad 


O Below are the results of conversion. For full support, both an OGG and AAC version of a 
sound must exist. More about audio support 


File Details 
q som-botao.wav Successfully converted to OGG and AAC 








OGG/AAC encoding quality: 96 kbps (lowest quality, quicker download) 


more files... Ok 


Figura 10.4: Som importado com sucesso 


Pronto, o efeito sonoro som-botao que usaremos quando o jogador 
clicar em algum botão já está importado. Faça o mesmo processo 
para importar os outros três sons da nossa pasta Audio. 


Feito isso, precisaremos de um objeto que seja responsável por 
fazer toda a lógica de sons dentro do nosso jogo. Esse objeto é o 
Audio . Uma vez importado em qualquer layout, este objeto se torna 
global, sendo acessível em qualquer folha de estilos. É o mesmo 
que acontece que os objetos Touch € Keyboard que usamos 
anteriormente. 


Na aba Insert a new object importe o objeto Áudio para dentro do 
layout, como mostra a figura: 


Insert New Object 


Double-click a plugin to create a new object type from: pill č o çžě  )] 


Gamepad Mouse 





Media 
| & 3 & 
Audio Geolocation User Media Video 


Monetisation 


Ga FB © 


Admob Ads iAd IAP pubCenter 





DI nth cus msm mim 


Name when inserted: | Array 














Description: Store an array of values in up to 3 dimensions. - More help on ‘Array’ 
Help Cancel 


Figura 10.5: Importando um objeto de audio 


Maravilha. Agora basta associar os eventos do jogo aos sons que 
importamos. Para isso, vamos voltar alguns passos. 


Você se lembra dos eventos de Touch que criamos para quando o 
jogador clicar nos botões btn_fase1 , btn fasez E btn jogar? 
Adicionaremos neles mais uma ação. Escolha o objeto de audio e 
dê a ação Play . No campo audio file da janela de parâmetros, 
escolha o som-botao , coloque o nome da tag de botao e clique em 
Done , Como a seguinte figura: 


Parameters for Audio: Play 


A tag, which can be anything you like, to use to reference this sound in future. 


Audio file |som-botao y 


Loop 'not looping nf 


tr 


Cancel Help on expressions Back 


Figura 10.6: Parâmetros do objeto Audio 


Isso fará com que O som-botao toque quando o jogador clicar nos 
botões: btn fasei, btn fase2 € btn jogar . Faça exatamente o 
mesmo processo para os outros botões citados. Ao final, nossa 
folha de eventos estará dessa forma: 


1/9 4) Touch On touched [*-- btn_fase1 a System Go to Fase1 

@) Audio Play som-botao not looping at volume O dB (tag "botao") 
219 4) Touch On touched lt; btn_fase2 Ea System Go to Fase2 

A) Audio Play som-botao not looping at volume O dB (tag "botao") 
3/9 4) Touch On touched === btn_jogar a System Go to TelaSelecaoFases 

d) Audio Play som-botao not looping at volume O dB (tag “botao") 


Figura 10.7: Eventos dos botões com o efeito sonoro 


Agora que aprendemos a inserir som nos eventos, coloque o som- 
estrela COM a tag estrela no evento da colisão do jogador com a 
estrela; O som-chave com a tag chave no evento de colisão do 
jogador com a chave; e por fim, O som-inimigo com a tag inimigo no 
evento da destruição inimigos pelo jogador. Esses três eventos 
ficarão como mostra a figura a seguir. 


Colisão com a estrela 


> fl Jogador On collision with sr W¥ estrela 
estrela É) Audio 


roma 


eee 


a 


| | 


Destroy 
Play som-estrela not looping at volume O dB (tag “estrela") 
Add 750 to pont 


Set text to pontuacao.pont 


Colisão com a chave 


ad ã Jogador | On collision with Om Ow chave 
chave dl) Audio 


Ea System 


Destroy 
Play som-chave not looping at volume O dB (tag "chave") 


Set chave to 7 


Colisão com o inimigo? 


= il Jogador | On collision with a 


inimigo? 
il Jogador Y < inimigo1.Y I Jogador 
H inimigo 1 
E) Audio 
iT} pontuacao 
iTi pontuacao 
SF system Else = JogadorAni... 


= JogadorAnim... X Is flashing *** coracoes 


> JogadorAni... 


Set A Platform vector Y to - 700 

Destroy 

Play som-inimigo not looping at volume O dB (tag “inimigo") 
Add 50 to pont 


Set text to pontuacao.pont 


Subtract 7 from vida 
Set animation frame to JogadorAnimacao.vida 


g Flash: Flash 0.1 on 0.1 off for 1.0 seconds 


Figura 10.8: Eventos com os outros sons 


Pronto, já conseguimos inserir os efeitos sonoros no jogo! Agora 
precisamos da nossa música de fundo. Veremos como adicioná-la 


no próximo tópico. 


10.3 Adicionando a música de fundo 


Vamos inserir agora a música de fundo das nossas fases. Para isso, 
importe o arquivo de áudio musica-Mattoglseby , da pasta de recursos 
Áudios , em nossa pasta music. Uma vez importado, queremos que 
essa música seja executada sempre no começo do layout. Para 
isso, vamos inserir mais uma ação no evento de inicialização do 
layout ( on start of layout ), que criamos lá no capítulo 

Movimenta ão e anima ão do personagem. 


Escolha o objeto audio e dê a ação Play para a música tocar 
quando o layout iniciar. Nos parâmetros, escolha o arquivo musica- 
MattOglseby NO Campo Audio file, afinal, essa é a música que 
desejamos tocar nas fases. 


Para que a música de fundo nunca pare (nem mesmo quando 
chegar ao fim), precisamos ligar a sua propriedade loop . Então, vá 
ao campo loop e selecione a opção looping , assim ela começará a 
tocar novamente quando terminar. E por fim, coloque um nome para 
essa música pelo campo Tag, como o nome main: 


Parameters for Audio: Play 


Choose the audio file to play. 
Audio file | musica-MattOglseby “e 
Loop looping ne 


Volume 


Tag (optional) "main" 


Cancel Help on expressions Back Done 


Figura 10.9: Parâmetros da música de fundo 


Com isso, cada vez que o layout for iniciado, a música vai tocar e 
sempre reiniciará quando terminar. Agora temos de colocar um 
evento para a música parar quando o layout finalizar. Para isso, 
selecione o objeto de sistema ( system ) e dê a condição on end of 
layout (quando terminar o layout). Para a ação, escolha o objeto 
Audio € dê a ação stop all, como mostra a figura a seguir. 


o dk System On end of layout d) Audio Stop all 


Figura 10.10: Evento On end of layout 


Esse evento fará com que todos os arquivos de áudio sejam 
desligados quando o layout terminar. Queremos que, quando o 
personagem perder todas as vidas e a tela de game over aparecer, 
a música pare. Para isso, precisamos voltar àquele evento de 
quando o jogador fica com vida igual a zero, criado no capítulo Telas 


de pausa e de fim de jogo, e adicionar mais uma ação. Selecione o 
objeto audio e dê a ação de stop, colocando main no campo Tag. 


Parameters for Audio: Stop 


The tag identifying the sound to stop. Leave empty to affect the last played sound. 


Tag Elis 


Cancel Help on expressions Back 


Figura 10.11: Parâmetros do objeto Audio 


O evento ficará assim: 


= JogadorAn... vida = 0 88 Tela_gameover Set position to (320, 240) 
i Jogador Destroy 
a System Set time scale to O 
dl) Audio Stop “main” 


Figura 10.12: Evento de vida igual a zero 


Além disso, também queremos que a música pare quando o botão 
de pausa for clicado e a tela de pausa aparecer. Para realizar isso, 
vamos adicionar essa mesma ação inserida agora no evento de 
Touch NO btn pausa, como mostra a figura a seguir. 


A Touch Is touching (un) q Jogador Set A Platform Disabled 


bin pausa dk System Set time scale to O 
pes Tela pause Set position to (320, 240) 
dl) Audio Stop “main” 


Figura 10.13: Evento do botão de pausa 


Agora colocaremos mais uma ação no evento btn telaPauseContinue : 
quando o botão de continuar da tela de pausa for clicado, 
desejamos que a música de fundo volte a tocar. Logo, vamos 
adicionar a mesma ação de tocar a música inserida no evento on 
start of layout , NO começo deste capítulo. O evento do botão de 
continuar ficará assim: 


> 4) Touch On touched [>] I Jogador Set A Platform Enabled 


miami dormem a System Set time scale to 1 


pes Tela pause Set position to (320, -4000) 


d) Audio Play musica- MattOglseby looping at volume O dB (tag 
“main”) 


Figura 10.14: Inclusão do botão na tela de pausa 


Também temos uma outra situação que precisa de atenção. Pode 
ser que, quando o jogador for jogar, ele não possa ou queira ouvir a 
música de fundo e os áudios no momento, por estar no ônibus ou 
tarde da noite em casa, por exemplo. Por isso, para finalizar, vamos 
colocar a possibilidade de silenciar os áudios do nosso jogo por 
meio de um novo botão. 


A ideia é que, quando esse botão for clicado uma vez, os áudios 
sejam mutados. Quando pressionado novamente, os áudios sejam 
ativados. Portanto, será um botão com dois frames, um para cada 
uma dessas situações. Vamos lá. 


Insira um objeto sprite na layer ur com o nome de btn som. Então, 
no primeiro frame, adicione a imagem btn-som.png €, NO Segundo, a 


btn-no-som.png , ambas da nossa pasta de recursos Botões , como 
vemos a seguir: 


Animation frames (2) E] 


ofa 


Figura 10.15: Sequência de frames do botão de pausar música 


Não esqueça de mudar O speed para e, como aprendemos 
anteriormente, pois só queremos ativar a animação por meio de 
eventos e não que ela mude sozinha quando iniciar o jogo. 
Posicione esta sprite que acabamos de inserir ao lado do botão de 
pausa do jogo: 





Figura 10.16: Botão de pausar a música inserido no layout 


Agora criaremos o evento para, quando esse botão for pressionado 
uma vez, todos os áudios do jogo serem silenciados; quando clicado 
novamente, voltem ao normal. O processo para isso acontecer vai 
ser muito semelhante ao que já fizemos com os outros botões no 
decorrer da construção do jogo. Utilizaremos o objeto Touch e seus 
eventos. 


Assim, vá à folha de eventos, escolha o objeto Touch e dê a 
condição de on touched object (no objeto clicado), escolhendo o 
botão btn som. Clique sobre esse evento com o botão direito do 
mouse e adicione um subevento. Nele, vamos tratar a aparência do 
botão. Quando ele estiver ativo, terá um quadro de animação 


diferente de quando estiver inativo, para que o nosso jogador saiba 
visualmente quando ele está selecionado ou não. 


Vá ao subevento, escolha novamente o botão btn som e dê a 
condição compare frame . Como por padrão o som estará ligado, 
precisamos deixar o frame de ligado no começo. Note na animação 
que ele é o primeiro frame. Coloque os parâmetros para quando o 
frame for igual a zero, já que é o frame do botão que representa os 
sons ativos. 


Parameters for btn som: Compare frame 


How to compare the current animation frame number (D-based). 


Comparison |= Equal to ww 


nave 


Cancel Help on expressions Back 


Figura 10.17: Comparando frames 


Para a ação, escolha novamente O btn som e dê a ação de set 
frame , escolhendo o frame 1, que representa o som desligado. 
Agora, para silenciar o jogo, usaremos uma função apropriada, a 
Set silent do objeto audio . Como o nome já diz, ele torna o jogo 
mudo, desligando tanto os efeitos sonoros quanto a música de 
fundo. 


Então, escolha o objeto de audio € a ação set silent, como 
descrevemos. No campo mode , coloque a opção silent , que diz 
para que todos os sons e músicas fiquem mudos, como mostra a 
seguir: 


Parameters for Audio: Set silent 


Set whether in silent mode or not, 


Mode silent v 


Cancel Help on expressions Back 


Figura 10.18: Set silent 


Quando o botão btn_som for clicado e os áudios estiverem ativados 
(frame o ), setamos o frame para 1 e eles são silenciados. 
Queremos que, quando ele for pressionado novamente, o frame 
seja setado para ə e os áudios voltem a tocar. Para isso, clique 
novamente sobre o evento principal Touch, com o botão direito do 
mouse, e insira mais um subevento. Faremos basicamente o inverso 
do que fizemos no primeiro passo. 


Escolha o objeto de sistema system e a condição Else . Na ação, 
insira novamente O btn som e, mais uma vez, dê a ação de set 

frame , colocando desta vez o frame e. Na outra ação, insira o objeto 
de audio, dê a ação set silent e, NO campo Mode , coloque a opção 
No silent , para despausar todos os áudios do jogo. 


Pronto, o evento de pausar e despausar todas as melodias ficará 
como a figura a seguir: 


» 4) Touch On touched [4] btn som 


[4]btn som Animation frame = O [4]btn som Set animation frame to 1 
dl) Audio Set silent 

dk System Else [4]btn som Set animation frame to O 
d) Audio Set not silent 


Figura 10.19: Evento de pausar e despausar a música de fundo 


Colocamos acima o botão responsável por silenciar e ativar os 
áudios do jogo, porém, no Construct 2, não temos a possibilidade de 
aumentar/ diminuir o som. Para isso, o jogador terá de elevar ou 
baixar o som do próprio aparelho/ dispositivo no qual estiver 
jogando. 


10.4 Tela inicial e a seleção de fases 


Agora que já configuramos todo o mecanismo de volume das 
melodias do jogo, vamos finalizar o capítulo inserindo as músicas 
das telas de início e de seleção de fases. O processo é muito 
semelhante ao que já fizemos até agora. A diferença aqui é que não 
poderemos criar tudo na folha de eventos que estivemos 
trabalhando no decorrer do jogo. Para estas telas, colocaremos os 
eventos em suas folhas de eventos específicas. 


Começando pela tela inicial, acesse a folha de eventos Telas e 
adicione o evento on start of layout do objeto system. Feito isso, 
adicione a ação Play do objeto audio e selecione a música 
musica telaInicial Com à tag de mesmo nome. Também não se 
esqueça de ativar a opção looping para que ela toque 
indefinidamente. 


























1 + System On start of )) Audio | Play musica_telalnicial looping at volume -10 dB (tag “musica telalnicial”) 
layout 
2 | Parameters for Audio: Play 
Choose the audio file to play. 
3 
Audio file musica_telalnicial v 
Loop looping v 
Volume |-10 
Tag (optional) |"musica_telalnicial" 
Cancel Help on expressions Back 








Figura 10.20: Adicionando uma música de fundo à tela inicial 


Feito isso, adicione o evento on end of layout , também do objeto 
System . Desta vez, adicione a ação stop do objeto audio e coloque 
a tag musica telaInicial . Desta maneira, conseguiremos evitar que 
as músicas do jogo toquem uma em cima da outra. Ao final, tudo 
deverá ficar assim: 


Telas | 

1 > {$ System On start of É) Audio Play musica telalnicial looping at volume -10 dB (tag “musica telolnicial”) 
layout 

2 > GP System On end of layout mf) Audio Stop “musica telalnicial” 

319 du) Touch Ontouched — 1) Audio Play Botao not looping at volume -5 dB (tag “*) 
btn start 


@ System Go to TelaSelecaoFases 


Figura 10.21: Evitando que as musicas entrem em conflito 


Muito bem. Agora basta repetir o mesmo processo para a tela de 
seleção de fases. Escolha a folha de eventos TelaselecaoFases @ 
adicione os eventos do objeto system para início e fim do layout. 
Para a música, escolha a opção que deixamos na pasta, a 

musica telaSelecaoDeFases . Ao final, devera ficar assim: 





1.» a System 


P] 
PA 


“ © System 


“+ 4) Touch 


= 4) Touch 


“+ 4) Touch 


On start of layout 


On end of layout 


On touched [=> 
btn_fase1 


On touched fe! 
btn_fase2 


On touched £ * 
btn_fase3 


1) Audio 


1) Audio 


GF System 
1) Audio 


pe] System 
1) Audio 


GB System 
1) Audio 


Play musica_telaSelecaoFases looping at volume -10 dB (tag "musica- 
telaSelecaoFases”) 


Stop “musica-telaSelecaoFases” 


Goto Fase1 
Play Botao not looping at volume 0 dB (tag “) 


Go to Fase2 
Play Botao not looping at volume 0 dB (tag “") 


Goto Fase3 
Play Botao not looping at volume 0 dB (tag “") 


Figura 10.22: Adicionando uma música de fundo à tela de seleção de fases 


10.5 Fim de jogo 


Ufa! E assim finalizamos o processo de criação do nosso jogo! 
Esperamos que agora você já tenha aprendido a como desenvolver 
tudo o que um jogo de plataforma precisa, desde criar fases e 
mecanismos de movimentação do personagem, dos inimigos e da 
plataforma; inserir funcionalidades nos botões; importar sons e 
música; entre muitas outras coisas que vimos no decorrer dessa 


jornada. 


No próximo capítulo, vamos aprender a exportar o nosso jogo e 
colocá-lo na internet para mostrar nossa obra ao mundo! 


CAPÍTULO 11 
Exportação e distribuição 


Agora que finalizamos todo o desenvolvimento do nosso jogo, 
chegamos à última etapa: a exportação. Este processo compacta 
todos os nossos arquivos de música, sons, imagens, layouts e 
códigos e converte-os em um formato específico (dependendo da 
plataforma escolhida). Como citamos lá no início, o Construct 2 nos 
oferece diversas opções de exportação, tais como: 


Web (HTML5); 

Wii U; 

Mobile (iOS, Android, Windows Phone, Blackberry); 

Desktop (Windows, Mac OSX, Linux); 

Extensões e aplicativos para navegadores (Firefox, Chrome) ; 
Facebook; 

Amazon Appstore. 


Infelizmente, na versão gratuita, há poucas opções de exportação. 
Temos somente disponíveis as extrações para Web, Facebook e 
Windows Store, além da própria exportação para a Scirra Store, o 
marketplace de jogos da desenvolvedora do Construct 2. 


O modo de exportação mais simples e eficaz é o Web (HTML5). O 
Facebook exige uma série de configurações extras 
(https://www.scirra.com/tutorials/58/how-to-make-a-facebook-game), 
e a Chrome Web Store exige uma licença de desenvolvedor 
(https://www.scirra.com/tutorials/68/publishing-to-the-chrome-web- 
store). Para a exportação com que trabalharemos aqui, 
conseguiremos fazer tudo gratuitamente. 


Neste capítulo, veremos como utilizar a exportação para Web 
(HTML5) e como usar o código gerado para distribuir o jogo na 
internet de forma gratuita, utilizando o BitBalloon 
(https://www.bitballoon.com/), serviço de hospedagem gratuita. 


11.1 Exportando o jogo 


O processo de exportação é muito mais simples do que parece. 
Para exportar o projeto, basta clicar na opção Export Project 
(exportar projeto), localizada em File no menu superior. Feito isso, 
a seguinte janela será exibida: 


Choose a platform to export to 


N 


HTMLS website Chrome Web Store 


| Web 


Mobile 


Mobile & Desktop 


| “mM : 


Publish to your own website. Users can play your game in a browser and bookmark it, Also use this 


option for 05 web apps and Facebook games. 
Cancel 








Figura 11.1: Exportando para HTML5 


Note que na imagem ha várias opções, mas na versão gratuita 
somente a opção HTML 5 website estará disponível. Selecione-a e 


clique em next . Na próxima janela, escolha aonde deseja exportar 
os seus arquivos no campo Export files to. Por padrão, ele deixará 
preenchido com o local onde o seu jogo está sendo desenvolvido. 
Recomendamos exportar em alguma outra pasta para não causar 
confusões. 


Nas opções subfolder for images (subdiretório para imagens) e 
Subfolder for project files (subdiretório para arquivos do projeto), 
deixe com a opção já preenchida por padrão — /images € /media, 
respectivamente. A título de curiosidade, essas opções servem para 
que você altere o local onde os arquivos do seu projeto serão salvos 
dentro da estrutura do projeto. Dificilmente você terá de alterar esse 
valor. 


Export options x 


Options 
Subfolder for images: | images) 
Subfolder for project files: | medial 
PNG recompression: | Standard (recommended) “A 


@ Minifying the script makes the download smaller and harder to decompile, 
You must have Java installed to run the minifier. 


Minify script (recommended) 


sen cane 


Figura 11.2: Opção de pasta 


No campo PnG recompression (compressão PNG), podemos escolher 
como as imagens contidas no nosso jogo serão comprimidas 
(diminuídas). Existem três opções disponíveis: 


e None: nenhuma compressão será aplicada, e as imagens 
ficarão do mesmo tamanho; 

e Standard : aS imagens serão comprimidas no tamanho 
recomendado; 

e Brute: aS imagens serão comprimidas ao maximo, mas isso 
pode causar uma demora na exportação do jogo (e elas podem 
perder parte da qualidade). 


A compressão de imagens é importante para deixarmos o nosso 
jogo otimizado. Quanto mais leves forem as imagens, mais rápida 
elas são carregadas. Como nossas figuras não são pesadas, 
deixaremos selecionada a opção standard. 


A última opção disponível é 0 minify script (minificar script). A 
prática de minificar o código-fonte é comum no desenvolvimento de 
software, e tem como objetivo tornar o código menor e ofuscado. 
Como resultado, o jogo é carregado mais rápido, e o código torna-se 
extremamente confuso para qualquer um que tente decodificá-lo. 
Lembre-se de que, no final das contas, todo o código gerado pelo 
Construct 2 é JavaScript. Vamos deixar esta opção marcada. 


REQUISITOS PARA MINIFICAR O C DIGO 


Para que o código do jogo seja minificado, é necessário ter o 


Java instalado na máquina. Caso não o tenha, clique em 
https://www.java.com/pt_BR/ e baixe o instalador. Feito isso, 
basta executá-lo para toda a instalação ser feita. 





Depois, clique novamente em next . Na próxima janela, 
escolheremos o tamanho do template que desejamos que o jogo 
seja visualizado. Esta opção é muito útil para caso você queira 
incorporar o código do jogo em alguma outra página da internet. 
Para o nosso caso, queremos que ele ocupe toda a tela disponível. 
Para isso, selecione a opção Normal Style. 


HTML5 export options 
Choose template 


(0) Normal style 
Display non-fullscreen games centered horizontally on the page, 
and fullscreen games using the whole browser window. 


(5 Advert bar style 


As with ‘Normal style’, but adds a bar beside the game where an 
advert or other HTML content can be placed. 


Side: | Left 
Size: | 150 px 
O Embed style 


Display aligned topdeft with no margins and scrollbars disabled, 
suitable for embedding in an iframe. Useful for publishing to 


arcades, 
Tips on publishing HTMLS games to the web Cancel 


Figura 11.3: Opção de pasta 


Feito todos os ajustes, clique na opção Export . À partir daí, a 
plataforma fará toda a conversão do nosso jogo. Esse processo não 
deverá levar mais do que alguns segundos (quanto maior o jogo, 
maior o tempo para conseguir exportá-lo). Quando terminar, a janela 
seguinte será exibida mostrando que tudo ocorreu como esperado: 


Construct 2 - Export HTMLS project k 


@ The project was successtully exported. 


Would you like to view the exported files? 


— Open destination folder 
View the files that were just exported. 


— Go back to Construct 2 
Close this dialog with no further action. 


Figura 11.4: Exportação com sucesso 


Pronto, o nosso jogo foi exportado! Escolha a opção open destination 
folder e veja a estrutura criada. Se você já tiver uma experiência 
com desenvolvimento de sites, notará que o código gerado é 
basicamente um site. Clique no arquivo index.html , e perceba que o 
jogo será aberto no navegador e executado. 


Então, com o jogo criado e exportado, chegou a hora de expo-lo na 
internet para que seus amigos e familiares possam jogar. 


11.2 Hospedando o jogo na internet 


Agora que exportamos o jogo, queremos distribuí-lo para que outras 
pessoas possam jogá-lo. Uma das formas mais fáceis e rápidas 
para isso é enviá-lo para a plataforma de hospedagem BitBalloon. 
Ela oferece hospedagem gratuita para sites estáticos. Como o 


nosso jogo foi exportado para HTMLS, a plataforma cai como uma 
luva. 


Caso você já tenha um serviço de hospedagem de sites (como UOL 
Host, GoDaddy ou HostGator), é possível utilizá-los também sem 
problemas. Mas para quem nunca lidou com hospedagem de 
websites na internet, recomendamos seguir os próximos passos. 


Primeiramente, entre no site https://www.bitballoon.com/, e crie uma 
conta gratuita clicando na opção sign up for Free . Após isso, você 
será levado para a página a seguir, na qual poderá enviar os seus 
projetos em HTMLS. 


By Netlify 


Your Sites 


Figura 11.5: BitBalloon 


É muito simples enviar o projeto para a plataforma. Compacte o 
código gerado dentro de um zip, então arraste-o para a área que 
diz: Drag e drop a new site (arraste e solte um novo site). Pronto, 
depois disso, é só esperar alguns segundos o uploading. 


O BitBalloon aceita somente um arquivo por vez no upload, por 
isso ele precisa estar em um zip. Além disso, arquivos .war 


ficam compactados em outro formato, e o BitBalloon não o 
entende. 





JOON OOOO 
OOOO 


Analyzing and Uploading 


Uploaded enfeitecenario6 fase1-sheetO.png 





Figura 11.6: Uploading 


Após concluir o upload, será gerado um link para o projeto com um 
nome aleatório: 


Blog Documentation 
By Netlify 


Your Sites 


ESTO SO Sais nannan 


surgeon-span-87825 


' 
i 
' hrtp://sui 
Z ' 
' 
i 
' 
' 
' 
i 
' 








Bo eee Sel eso Sasa 


Figura 11.7: Upload concluido 


Para modificá-lo, basta clicar no nome aleatório criado e, na próxima 
página, editar o nome no campo Edit name (editar nome). 


Overview Users Forms History Billing 


candyworld.| bitballoon.com 


[E Eait name] [Z Edit name] O Editdomain O Make public 


Scripts and Integrations 


Add analytics tracking codes or custom scripts. 





Figura 11.8: Editando o nome 


Pronto, um link para o jogo foi criado com o nome escolhido, e agora 
você já pode jogar ou enviar para quem quiser! Caso você queira 
subir uma nova versão do mesmo jogo, basta repetir o processo, 
assim como para subir novos jogos. 


A seguir, acesse o link do nosso jogo hospedado no BitBalloon: 


http://candyworld.bitballoon.com/. 





CAPÍTULO 12 
Dicas finais 


Neste capítulo, daremos algumas dicas que poderão ser úteis no 
desenvolvimento dos seus futuros jogos. 


12.1 Onde conseguir recursos 


Grandes produtoras de jogos (como Electronic Arts, Sony, Ubisoft e 
tantos outros estúdios) possuem grandes equipes responsáveis por 
lidar com cada um dos aspectos de um jogo. Uma equipe cuida da 
animação, outra da música, outra da programação, e assim por 
diante. Quando estamos trabalhando de forma independente, 
precisamos tratar de todos estes aspectos sozinhos. Para facilitar 
esse trabalho, podemos contar com recursos distribuídos na 
internet. 


Podemos encontrar de tudo na internet, desde músicas de fundo, 
sons de efeitos, desenhos de personagens, códigos de template etc. 
Pacotes de recursos como o que utilizamos neste livro também 
podem ser obtidos, mas é preciso muito cuidado para não violar os 
direitos autorais de criação do dono desses recursos. 


Muitos não levam isso a sério e usam qualquer um que acha na 
internet, mas lembre-se de que isso é contra a lei. Entretanto, isso 
não significa que você precisará gastar fortunas para conseguir 
acessar esses materiais. 


Há uma série de sites nacionais que oferecem, por um baixo custo 
(ou de graça), recursos para serem utilizados. Uma vez comprados, 
podem ser usados sem medo para construção de jogos, mesmo que 
sejam de caráter comercial. 


A seguir, veja uma lista com alguns sites nacionais que podem ser 
usados para obter recursos para os seus jogos: 


e Time to Play (http://timetoplay.com.br/) — Empresa focada na 
criação de jogos com códigos-fontes comentados, templates e 
recursos para jogos. 

e Polar Games (http://polargames.com.br/) — Empresa focada na 
criação de cursos de Construct 2. 

e Parametade Games (http://www.perametade.com/) — Projeto 
de introdução a desenvolvimento de games por meio de 
videoaulas e códigos-fontes. 


Existem também alguns sites internacionais, como: 


e Incompetech (https://incompetech.com/) — Site com várias 
músicas gratuitas e com licença livre para uso nos jogos. 

e Free Play Music (http://freeplaymusic.com/) — Site que também 
oferece várias músicas gratuitas com licença livre. 

e BFXR (https://www.bfxr.net/) — Programa gratuito para fazer 
efeitos sonoros para jogos. 

e Orange Free Sounds (http://www.orangefreesounds.com/) — 
Site que oferece músicas e sons gratuitos com licença livre. 


12.2 Conversão de áudio 


Como explicamos no capítulo Música e sons, para facilitar a 
importação de áudios no Construct 2, é recomendado que ele esteja 
no formato .wav . Uma forma fácil, rápida e gratuita para converter 
áudios de qualquer formato para qualquer formato é o Cloud 
Convert (https://cloudconvert.com/). 


Logo que entramos no site, veremos o botão select Files, como 
mostra a figura a seguir: 


cloudconvert 


convert anything to anything 





‘A Select Files z 


= 218 formats supported cê» file conversion in the cloud 


CloudConvert supports the conversion between more than There is no need to install any software on your computer! 

200 different audio, video, document, ebook, archive, MA Upload your files to CloudConvert and we will do the job for 

image, spreadsheet and presentation formats. Check the you. Don't worry. your files are safe and only you can 

supported formats for more details. access them. They will be deleted again as soon as your 
conversion is finished 


Figura 12.1: Cloud Convert 


Ao clicar nele, é aberta uma janela para procurar o arquivo de áudio 
que você deseja fazer a conversão dentro dos seus diretórios. 
Escolha-o e clique em abrir. Depois de o sistema verificar qual o 
formato do áudio importado, você terá a opção de escolher qual é o 
formato em que quer convertê-lo: 


cloudconvert 


convert mp3 to wav 





“) musica.mp3 wavy # Ready (7 MB) 
aac 
E create archive ~ 
ac3 
aiff 
flac 
i m4a E 

MPEG-1 Audio Layer 3 Waveform audio format .- 

mp3 
c] ) MP3 is an audio format that can compress and enct ogg | ) way is an audio file that is associated with Microsoft 
audio file. It uses the lossy compression algorithm EO Windows. It is the default audio format for Windows. But it 
contain audio data. The lossy compression helps tola supports almost all the Operating Systems. WAV files are 


the data significantly without losing audio quality MF wma comparatively larger than MP3 files. It is mostly used to 


Figura 12.2: Conversao 


Em seguida, basta clicar no botão start Conversion para a conversão 
começar: 


cloudconvert 


convert mp3 to wav 





E [JE] Uploading file... (4.1 | © cance! | 
D musica.mp3 wan IGE mb) O cance 
MPEG-1 Audio Layer 3 Waveform audio format 
rg ) MP3 is an audio format that can compress and encode an a ) WAV is an audio file that is associated with Microsoft 
audio file. It uses the lossy compression algorithm to Windows. It is the default audio format for Windows. But it 


contain audio data. The lossy compression helps to reduce supports almost all the Operating Systems. WAV files are 
the data significantly without losing audio quality. MP3s are comparatively larger than MP3 files. It is mostly used to 


A Notify me when it is finished 
4 i E ~ ‘ 
a Select Files @sSave file tomy Dropbox « ~ Start Conversion 




















Figura 12.3: Conversão iniciada 


Após isso, basta fazer o download do arquivo em seu computador e 
usá-lo em seus projetos! 


12.3 Referências 


Manual oficial do Construct 2 — 
https://www.scirra.com/manual/1/construct-2 


Tutorial da Scirra - Beginner's guide to Construct 2 — 
https://www.scirra.com/tutorials/37/beginners-guide-to-construct-2 


Produção de jogos - Construct 2: o Guia Completo, por Raphael 
Dias — http://producaodejogos.com/construct-2/ 


Meetup Construct 2 - SP — https://www.meetup.com/pt- 
BR/Construct2-Sao-Paulo/ 


Grupo do Facebook - Construct 2 Brasil — 
https://www.facebook.com/groups/Construct2BR/ 


CAPÍTULO 13 
Construct 3 


O Construct 3 está na versão beta para o público desde abril de 
2017. Ainda não saíram informações de quando essa nova versão 
se tornará estável, mas já podemos testá-la para verificar as 
diferenças e as novidades. 


Vale ressaltar que o Construct 2 ainda vai ser mantido pela Scirra a 
longo prazo, e tudo o que foi ensinado no decorrer deste livro 
continuará válido. Porém, as novidades das funcionalidades só 
serão implementadas no Construct 3. 


< 





CONSTRUCTS 


Figura 13.1: Visual do Construct 3 


13.1 Diferenças 


A principal mudança, e que foi bastante criticada pelo público, é o 
preço. Agora, é preciso pagar por ano para ter acesso às versões 
pagas do Construct, diferente do Construct 2, já que nele era 
necessário pagar somente uma vez para adquiri-lo. Os planos 
serão: 


e Personal: para uso individual e sem fins lucrativos = R$ 343,39 
por ano. 

e Business: para empresas e organizações de todos os 
tamanhos e tipos, com fins lucrativos e sem restrição de valores 
= R$ 499,89 por ano. 

e Education: somente para o uso de estudantes e instituições de 
ensino = R$ 47,79 por mês ou R$ 139,09 por ano. 


Temos também a opção de usar a versão gratuita do Construct 3. 
Mas ela é bem mais limitada do que versão gratuita do Construct 2. 
Das principais diferenças destacam-se as limitações: 


e No Construct 2 gratuito, podemos ter até 100 eventos, 4 layers 
e 2 efeitos. 

e No Construct 3 gratuito, podemos ter somente até 25 eventos, 2 
layers e 2 efeitos. 


Outra diferença bem relevante também é que agora o Construct 3 
roda dentro do navegador, como vemos a seguir: 


Pe construct3- the nea» x YA Ashley. 








e C O localhost:6000¢ wl i 
EE o == 5 .- é ET 

About E k = -v C The Next Penelope 
Nam The Next Penelope > BB Layouts 

0.00 INENEAI > BE Event sheets 
Version 1.0. 
Description Racing + A > BE Object types 
D > BB Families 

om.co 

—— > RE Sound: 

Auth Aurelien Regard > mM 
Ei RACE TO ODYSSEUS O vid 
Website http://the-next-penelor O Font 
Colo; > @ icons 
Background color B 0, 0, 0 O Fil 
Splash color 255, 255, 255 


Use theme color 


Startup 
First layout title 


Use loader layout 


Loader style Progress bar & logo ¥ B Fond 
Preload sounds 4) y E 2A cu 

” j 
Display k So Ô ter_plan 
Viewport size DP 1280x720 E Lay 

” B arrire pl 
Fullscreen mode Letterbox scal aÂ ss 
Fullscreen quality Los 
Orientat Landscap 
Sampling Linear 
Pixel roundi 
Airea Mouse: (454, -90) Active layer: Layer GUI Zoom: 56% ~ 
Editor hd E > Layers - title x | Tilemap x) 


Figura 13.2: Construct 3 rodando dentro do Chrome 


A principal vantagem é que não existe mais a necessidade de 
instalar nada em máquina, pois é tudo feito pela internet. Entretanto, 
não é possível trabalhar offline. 


13.2 Novidades 


As principais novidades são: 


e Execução do Construct 3 direto no navegador: basta fazer 
login na conta e começar a construir os jogos. 

e Multiplataforma: pode ser executado pelo Windows, Mac, 
Linux, Chrome OS e Android. 

e Multi-idiomas: suporta a tradução completa para outras 
línguas. 

e Uso em celular: usando o Android, é possível ajustar, 
visualizar e rever os projetos pelo seu celular, mas só se o 
dispositivo tiver o navegador Chrome instalado. 


Menu F$ "~= sa 
O Goba number FirstRun = 0- 
Of fest run, 7 after restarting layout 
Touch control 
Controlling the player spaceship with touch 
Y controls, of using the mouse on desktop. 





if the player is touching the screen (but mot 
the rackets button), and the player dent righi 
under the touch, move them towards the 
touch location and make the jet sound play. 


iL Touch 


À Touch 
LI Serale 
=" 


No Player 


a) Audic 


le in touch 

* ts touching dk. 
RocketButton 
distance/Plaver. X, Player Y 
Touch.X, Touch Yi > 200 = di 


Move S00 = dt pixels at angle 
ange Player. x. Player. i 
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Figura 13.3: Construct 3 rodando no Android 


Salvar na nuvem: salve os projetos diretamente no Dropbox, 
Google Drive ou OneDrive, mantendo-os seguros. 


Novos editores de dados: configure dados para o seu jogo 
usando o novo editor de dicionário, editor de arrays e editor de 
texto. 

Estatísticas do projeto: veja as estatísticas com detalhes do 
seu jogo no novo diálogo dedicado, pela Barra de projetos. 
Pré-visualização remota: possibilidade de compartilhar o seu 
jogo por URL, permitindo também que ele seja testado em 
diversos dispositivos. 

Pesquisa aprimorada: recurso para pesquisar eventos por 
todo o projeto e também encontrar referências que permitem 
visualizar uma lista abrangente de todos os lugares em que um 
objeto, uma Behavior ou até uma variável é usada no jogo. 
Design da folha de eventos atualizado: foram incluídos novos 
botões para adicionar mais conteúdos, exibições de expressões 
mais claras, um modo de exibição compacto para celular e uma 
nova visualização de impressão. 

Nova interface do editor de animações: mais simples, com 
tudo em uma única janela. Nova paleta de cores, melhor 
suporte de arrastar e soltar, exibição de grade e mais opções de 
exportação. 

Uso reduzido de memória: arquitetura melhorada combinada 
com o carregamento sob demanda, de modo que apenas o 
conteúdo aparente é carregado na memória, ajudando a 
garantir que até projetos pesados sejam abertos em 
dispositivos sem muita memória. 

Compatível com versões anteriores: é possível importar os 
jogos do Construct 2 para o Construct 3. 

Maior precisão de aceleração: certifique-se de que seus 
movimentos, como o comportamento da plataforma, tenham 
uma melhor previsibilidade e precisão ao usar a precisão de 


movimento aprimorada. Isso ajuda a garantir que as coisas 
como a altura do salto sejam mais consistentes. 


Para obter mais informações, acesse o site oficial, em 
https://www.construct.net/br. 


